From 13dcf7334801c48f999525126c95c55845625884 Mon Sep 17 00:00:00 2001 From: Lakshmishri Date: Tue, 24 Oct 2023 10:33:33 +0200 Subject: [PATCH 01/15] add to show some text available in english --- blocks/vin-number/vin-number.css | 8 +++++++- blocks/vin-number/vin-number.js | 18 ++++++++++++++++-- placeholder.json | 10 +++++++++- 3 files changed, 32 insertions(+), 4 deletions(-) diff --git a/blocks/vin-number/vin-number.css b/blocks/vin-number/vin-number.css index f3173252..038c8ab9 100644 --- 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 index fff4aeaf..b624c2ac 100644 --- 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,6 +63,7 @@ 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'); @@ -91,8 +95,14 @@ 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 (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(`
  • @@ -126,6 +136,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 +196,7 @@ export default async function decorate(block) { const vinResultsContainer = createElement('div', { classes: 'vin-number__results-container' }); const innerContent = docRange.createContextualFragment(` +
    `); diff --git a/placeholder.json b/placeholder.json index 5d1df028..4991981b 100644 --- a/placeholder.json +++ b/placeholder.json @@ -117,7 +117,7 @@ }, { "Key": "mfr_notes", - "Text": "Next steps" + "Text": "Next Steps" }, { "Key": "mfr_recall_number", @@ -130,6 +130,14 @@ { "Key": "recall_oldest_info", "Text": "Recall information available since: Jan 15, 2008" + }, + { + "Key": "tc_recall_nbr", + "Text": "Transport Canada Number" + }, + { + "Key": "no-french-info", + "Text": "* Some of the information is available in english" } ], ":type": "sheet" From 94830f0bba3e7114728026472f33ac309fb83e69 Mon Sep 17 00:00:00 2001 From: Lakshmishri Date: Tue, 24 Oct 2023 21:39:28 +0200 Subject: [PATCH 02/15] change logo size --- blocks/nhtsa-header/nhtsa-header.css | 11 +++-------- 1 file changed, 3 insertions(+), 8 deletions(-) diff --git a/blocks/nhtsa-header/nhtsa-header.css b/blocks/nhtsa-header/nhtsa-header.css index 15adc745..516948e7 100644 --- a/blocks/nhtsa-header/nhtsa-header.css +++ b/blocks/nhtsa-header/nhtsa-header.css @@ -55,15 +55,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; } - } From f02616852d3a298cf6ff33074e9d404322615587 Mon Sep 17 00:00:00 2001 From: Lakshmishri Date: Thu, 26 Oct 2023 10:28:50 +0200 Subject: [PATCH 03/15] add links to logos --- blocks/nhtsa-header/nhtsa-header.css | 2 -- blocks/nhtsa-header/nhtsa-header.js | 10 ++++------ 2 files changed, 4 insertions(+), 8 deletions(-) diff --git a/blocks/nhtsa-header/nhtsa-header.css b/blocks/nhtsa-header/nhtsa-header.css index 516948e7..69a3b2e0 100644 --- 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; } diff --git a/blocks/nhtsa-header/nhtsa-header.js b/blocks/nhtsa-header/nhtsa-header.js index dd52d395..47cf5c56 100644 --- 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.us/)) { + element.target = '_blank'; } }); } From ef9e8fd5874a84cab46ef656a789b34cc20b909c Mon Sep 17 00:00:00 2001 From: Lakshmishri Date: Thu, 26 Oct 2023 14:28:20 +0200 Subject: [PATCH 04/15] chnage match url for volvo --- blocks/nhtsa-header/nhtsa-header.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/blocks/nhtsa-header/nhtsa-header.js b/blocks/nhtsa-header/nhtsa-header.js index 47cf5c56..546f738b 100644 --- a/blocks/nhtsa-header/nhtsa-header.js +++ b/blocks/nhtsa-header/nhtsa-header.js @@ -5,7 +5,7 @@ function hideButtons(buttons) { buttons.forEach((element) => { if (element.href.match(/\/recalls/)) { element.classList.add('button', 'nhsta-header__langauge-switch'); - } else if (element.href.match(/www.volvotrucks.us/)) { + } else if (element.href.match(/www.volvotrucks/)) { element.target = '_blank'; } }); From d2876024ce6121a4ca6e7968829dafb848860a33 Mon Sep 17 00:00:00 2001 From: Lakshmishri Date: Thu, 26 Oct 2023 15:28:25 +0200 Subject: [PATCH 05/15] change date format and validation message for length --- blocks/vin-number/vin-number.js | 6 ++++++ placeholder.json | 4 ++++ 2 files changed, 10 insertions(+) diff --git a/blocks/vin-number/vin-number.js b/blocks/vin-number/vin-number.js index b624c2ac..171a357a 100644 --- a/blocks/vin-number/vin-number.js +++ b/blocks/vin-number/vin-number.js @@ -95,6 +95,8 @@ function renderRecalls(recallsData) { let itemValue = item.class ? capitalize(recall[item.key]) : recall[item.key]; if (recallClass) { itemValue = getTextLabel(recall[item.key]); + } 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]; @@ -210,6 +212,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')); }; diff --git a/placeholder.json b/placeholder.json index 4991981b..1a1c7bc3 100644 --- a/placeholder.json +++ b/placeholder.json @@ -138,6 +138,10 @@ { "Key": "no-french-info", "Text": "* Some of the information is available in english" + }, + { + "Key": "vinformat-length", + "Text": "Please fill out this field" } ], ":type": "sheet" From bd914c6dc54cb84af2bb8e47d1a5dc326134edbe Mon Sep 17 00:00:00 2001 From: Lakshmishri Date: Thu, 26 Oct 2023 20:16:11 +0200 Subject: [PATCH 06/15] change refresh date format for french --- blocks/vin-number/vin-number.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/blocks/vin-number/vin-number.js b/blocks/vin-number/vin-number.js index 171a357a..b2c5fee6 100644 --- a/blocks/vin-number/vin-number.js +++ b/blocks/vin-number/vin-number.js @@ -67,13 +67,18 @@ function renderRecalls(recallsData) { 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(`

    ${getTextLabel('recalls')}    

    - [${getTextLabel('published_info')}: ${recallsData.refresh_date} | ${getTextLabel('recall_oldest_info')}] + [${getTextLabel('published_info')}: ${refreshDate} | ${getTextLabel('recall_oldest_info')}]
    `); From 4aedd37827a8b7fea581c8244a637fa3a4870e6d Mon Sep 17 00:00:00 2001 From: "aem-code-sync[bot]" Date: Wed, 1 Nov 2023 18:48:14 +0000 Subject: [PATCH 07/15] Update feed.xml --- news-and-stories/press-releases/feed.xml | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/news-and-stories/press-releases/feed.xml b/news-and-stories/press-releases/feed.xml index 344cd258..84a9ccac 100644 --- a/news-and-stories/press-releases/feed.xml +++ b/news-and-stories/press-releases/feed.xml @@ -2,10 +2,18 @@ https://www.volvotrucks.us/news-and-stories/press-releases/ Volvo Trucks USA Press Releases - 2023-10-17T00:00:00.000Z + 2023-11-01T00:00:00.000Z AEM News feed generator (GitHub action) Volvo Trucks USA Press Releases + + <![CDATA[Volvo VNR Electric Trucks Deliver Zero-Tailpipe Emissions and Groceries for Loblaw, Canada's Grocery Retail Leader]]> + https://www.volvotrucks.us/news-and-stories/press-releases/2023/november/volvo-vnr-electric-trucks-deliver-zero-tailpipe-emissions-and-groceries-for-loblaw-canadas-grocery-retail-leader/ + + 2023-11-01T00:00:00.000Z + + 2023-11-01T00:00:00.000Z + <![CDATA[Volvo Trucks Continues Expansion of Electromobility Ecosystem with 11 New Certified EV Dealers in North America]]> https://www.volvotrucks.us/news-and-stories/press-releases/2023/october/volvo-trucks-continues-expansion-of-electromobility-ecosystem-with-11-new-certified-ev-dealers-in-north-america/ From c68bd24c6cc5b2ccb555e85d5e6f98065f1e222d Mon Sep 17 00:00:00 2001 From: Lakshmishri Date: Tue, 24 Oct 2023 17:23:04 +0200 Subject: [PATCH 08/15] 483 making footer configurable --- blocks/footer/footer.js | 6 +- blocks/recalls-footer/recalls-footer.css | 85 ++++++++++++++++++++++++ blocks/recalls-footer/recalls-footer.js | 36 ++++++++++ scripts/common.js | 10 ++- 4 files changed, 132 insertions(+), 5 deletions(-) create mode 100644 blocks/recalls-footer/recalls-footer.css create mode 100644 blocks/recalls-footer/recalls-footer.js diff --git a/blocks/footer/footer.js b/blocks/footer/footer.js index 856089cf..0cc70df8 100644 --- 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 { createElement, getLanguagePath } from '../../scripts/common.js'; /* eslint-disable no-use-before-define */ function displayScrollToTop(buttonEl) { @@ -44,9 +44,7 @@ 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`; + const footerPath = cfg.footer || `${getLanguagePath()}footer`; const resp = await fetch(`${footerPath}.plain.html`); const html = await resp.text(); const footer = createElement('div', { classes: 'footer-container' }); diff --git a/blocks/recalls-footer/recalls-footer.css b/blocks/recalls-footer/recalls-footer.css new file mode 100644 index 00000000..87b20711 --- /dev/null +++ b/blocks/recalls-footer/recalls-footer.css @@ -0,0 +1,85 @@ +.recalls-footer { + background: var(--c-grey-50); + border-top: 1px solid var(--c-grey-300); + padding-top: 20px; + padding-bottom: 20px; + color: var(--c-grey-4); +} + +.recalls-footer :is(p, a) { + font-family: var(--ff-volvo-novum); + font-feature-settings: 'clig' off, 'liga' off; + font-size: 16px; + letter-spacing: 0.5px; +} + +.recalls-footer a { + color: var(--c-grey-4); +} + +.recalls-footer a:hover { + color: var(--c-cta-blue-hover); + text-decoration: underline; +} + +.recalls-footer__container { + display: flex; + align-items: center; + gap: 8px; + width: calc(var(--wrapper-width) - 20px); + margin: 0 auto; + flex-flow: column; + flex-wrap: wrap; + + @media (min-width: 1200px) { + flex-flow: row; + justify-content: space-between; + } +} + +.recalls-footer__logo-container .icon svg { + width: 100px; + height: 20px; + + @media (min-width: 1200px) { + width: 160px; + height: 30px; + } +} + +.recalls-footer__copyright p { + margin-top: 0; + + @media (min-width: 1200px) { + margin-top: 1em; + } +} + +.recalls-footer__link-list { + list-style: none; + display: flex; + justify-content: center; + align-items: center; + flex-wrap: wrap; +} + +.recalls-footer__link-list li { + margin-bottom: 4px; +} + +.recalls-footer__link-list li:not(:first-child) { + padding-left: 8px; +} + +.recalls-footer__link-list li::after { + content: ''; + position: relative; + top: 2px; + height: 14px; + border-right: 1px solid var(--c-grey-300); + padding-right: 10px; +} + +.recalls-footer__link-list li:nth-last-child(1)::after { + display: none; +} diff --git a/blocks/recalls-footer/recalls-footer.js b/blocks/recalls-footer/recalls-footer.js new file mode 100644 index 00000000..eec7cb82 --- /dev/null +++ b/blocks/recalls-footer/recalls-footer.js @@ -0,0 +1,36 @@ +import { getMetadata, readBlockConfig, decorateIcons } from '../../scripts/lib-franklin.js'; +import { createElement, getLanguagePath } from '../../scripts/common.js'; + +const blockName = 'recalls-footer'; +/** + * loads and decorates the footer + * @param {Element} block The header block element + */ +export default async function decorate(block) { + const cfg = readBlockConfig(block); + block.textContent = ''; + const footerPath = cfg.footer || `${getLanguagePath()}${getMetadata('footer')}`; + const resp = await fetch(`${footerPath}.plain.html`); + const html = await resp.text(); + const footer = createElement('div', { classes: `${blockName}__container` }); + footer.innerHTML = html.replaceAll('{year}', new Date().getFullYear()); + + const [logoContainer, footerCopyright, footerLinks] = footer.children; + + if (footerLinks) { + footerLinks.classList.add(`${blockName}__link-container`); + const list = footerLinks.firstElementChild; + list?.classList.add(`${blockName}__link-list`); + } + + if (footerCopyright) { + footerCopyright.classList.add(`${blockName}__copyright`); + } + + if (logoContainer) { + logoContainer.classList.add(`${blockName}__logo-container`); + } + + block.append(footer); + await decorateIcons(footer); +} diff --git a/scripts/common.js b/scripts/common.js index 2e2c1977..d8f9a93e 100644 --- a/scripts/common.js +++ b/scripts/common.js @@ -6,6 +6,7 @@ import { loadHeader, buildBlock, decorateBlock, + getMetadata, } from './lib-franklin.js'; let placeholders = null; @@ -15,7 +16,8 @@ let placeholders = null; */ function loadFooter(footer) { if (footer) { - const footerBlock = buildBlock('footer', ''); + const blockName = getMetadata('footer-block') || 'footer'; + const footerBlock = buildBlock(blockName, ''); footer.append(footerBlock); decorateBlock(footerBlock); loadBlock(footerBlock); @@ -294,3 +296,9 @@ export const getJsonFromUrl = async (route) => { } return null; }; + +export const getLanguagePath = () => { + const { pathname } = new URL(window.location.href); + const langCodeMatch = pathname.match('^(/[a-z]{2}(-[a-z]{2})?/).*'); + return langCodeMatch ? langCodeMatch[1] : '/'; +}; From 96b62f262e774ff616391874e60978daeb7b6131 Mon Sep 17 00:00:00 2001 From: Lakshmishri Date: Tue, 24 Oct 2023 21:29:19 +0200 Subject: [PATCH 09/15] changes for footer --- blocks/footer/footer.js | 8 ++- blocks/recalls-footer/recalls-footer.css | 85 ------------------------ blocks/recalls-footer/recalls-footer.js | 36 ---------- 3 files changed, 6 insertions(+), 123 deletions(-) delete mode 100644 blocks/recalls-footer/recalls-footer.css delete mode 100644 blocks/recalls-footer/recalls-footer.js diff --git a/blocks/footer/footer.js b/blocks/footer/footer.js index 0cc70df8..0684e5f2 100644 --- a/blocks/footer/footer.js +++ b/blocks/footer/footer.js @@ -50,15 +50,17 @@ export default async function decorate(block) { const footer = createElement('div', { classes: 'footer-container' }); footer.innerHTML = html.replaceAll('{year}', new Date().getFullYear()); + const isRecallTemplate = document.querySelector('meta[content="recalls"]'); + const [mainLinkWrapper, footerBar, footerCopyright] = footer.children; openExternalLinksInNewTab(footer); - wrapSocialMediaLinks(mainLinkWrapper); const headings = footer.querySelectorAll('h1, h2, h3, h4, h5, h6'); [...headings].forEach((heading) => heading.classList.add('footer__title')); - if (mainLinkWrapper) { + if (mainLinkWrapper && !isRecallTemplate) { + 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'); @@ -78,6 +80,8 @@ export default async function decorate(block) { title.addEventListener('click', (e) => toggleExpand(e.currentTarget)); }); + } else if (isRecallTemplate) { + mainLinkWrapper.remove(); } const copyrightWrapper = createElement('div', { classes: 'footer-copyright-wrapper' }); diff --git a/blocks/recalls-footer/recalls-footer.css b/blocks/recalls-footer/recalls-footer.css deleted file mode 100644 index 87b20711..00000000 --- a/blocks/recalls-footer/recalls-footer.css +++ /dev/null @@ -1,85 +0,0 @@ -.recalls-footer { - background: var(--c-grey-50); - border-top: 1px solid var(--c-grey-300); - padding-top: 20px; - padding-bottom: 20px; - color: var(--c-grey-4); -} - -.recalls-footer :is(p, a) { - font-family: var(--ff-volvo-novum); - font-feature-settings: 'clig' off, 'liga' off; - font-size: 16px; - letter-spacing: 0.5px; -} - -.recalls-footer a { - color: var(--c-grey-4); -} - -.recalls-footer a:hover { - color: var(--c-cta-blue-hover); - text-decoration: underline; -} - -.recalls-footer__container { - display: flex; - align-items: center; - gap: 8px; - width: calc(var(--wrapper-width) - 20px); - margin: 0 auto; - flex-flow: column; - flex-wrap: wrap; - - @media (min-width: 1200px) { - flex-flow: row; - justify-content: space-between; - } -} - -.recalls-footer__logo-container .icon svg { - width: 100px; - height: 20px; - - @media (min-width: 1200px) { - width: 160px; - height: 30px; - } -} - -.recalls-footer__copyright p { - margin-top: 0; - - @media (min-width: 1200px) { - margin-top: 1em; - } -} - -.recalls-footer__link-list { - list-style: none; - display: flex; - justify-content: center; - align-items: center; - flex-wrap: wrap; -} - -.recalls-footer__link-list li { - margin-bottom: 4px; -} - -.recalls-footer__link-list li:not(:first-child) { - padding-left: 8px; -} - -.recalls-footer__link-list li::after { - content: ''; - position: relative; - top: 2px; - height: 14px; - border-right: 1px solid var(--c-grey-300); - padding-right: 10px; -} - -.recalls-footer__link-list li:nth-last-child(1)::after { - display: none; -} diff --git a/blocks/recalls-footer/recalls-footer.js b/blocks/recalls-footer/recalls-footer.js deleted file mode 100644 index eec7cb82..00000000 --- a/blocks/recalls-footer/recalls-footer.js +++ /dev/null @@ -1,36 +0,0 @@ -import { getMetadata, readBlockConfig, decorateIcons } from '../../scripts/lib-franklin.js'; -import { createElement, getLanguagePath } from '../../scripts/common.js'; - -const blockName = 'recalls-footer'; -/** - * loads and decorates the footer - * @param {Element} block The header block element - */ -export default async function decorate(block) { - const cfg = readBlockConfig(block); - block.textContent = ''; - const footerPath = cfg.footer || `${getLanguagePath()}${getMetadata('footer')}`; - const resp = await fetch(`${footerPath}.plain.html`); - const html = await resp.text(); - const footer = createElement('div', { classes: `${blockName}__container` }); - footer.innerHTML = html.replaceAll('{year}', new Date().getFullYear()); - - const [logoContainer, footerCopyright, footerLinks] = footer.children; - - if (footerLinks) { - footerLinks.classList.add(`${blockName}__link-container`); - const list = footerLinks.firstElementChild; - list?.classList.add(`${blockName}__link-list`); - } - - if (footerCopyright) { - footerCopyright.classList.add(`${blockName}__copyright`); - } - - if (logoContainer) { - logoContainer.classList.add(`${blockName}__logo-container`); - } - - block.append(footer); - await decorateIcons(footer); -} From 89253dd4aaafc090f2659c3868ac8fc81960a80f Mon Sep 17 00:00:00 2001 From: Lakshmishri Date: Thu, 26 Oct 2023 16:16:48 +0200 Subject: [PATCH 10/15] fetch custom footer from path --- blocks/footer/footer.js | 28 +++++++++++++++++----------- 1 file changed, 17 insertions(+), 11 deletions(-) diff --git a/blocks/footer/footer.js b/blocks/footer/footer.js index 0684e5f2..6ede6ca4 100644 --- a/blocks/footer/footer.js +++ b/blocks/footer/footer.js @@ -1,4 +1,4 @@ -import { readBlockConfig, decorateIcons } from '../../scripts/lib-franklin.js'; +import { readBlockConfig, decorateIcons, getMetadata } from '../../scripts/lib-franklin.js'; import { createElement, getLanguagePath } from '../../scripts/common.js'; /* eslint-disable no-use-before-define */ @@ -44,22 +44,28 @@ function addScrollToTopButton(mainEl) { export default async function decorate(block) { const cfg = readBlockConfig(block); block.textContent = ''; - const footerPath = cfg.footer || `${getLanguagePath()}footer`; + let footerPath = cfg.footer || `${getLanguagePath()}footer`; + const isCustomFooter = getMetadata('custom-footer'); + if (isCustomFooter) { + footerPath = cfg.footer || `${getLanguagePath()}${getMetadata('custom-footer')}`; + } + 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 isRecallTemplate = document.querySelector('meta[content="recalls"]'); - - const [mainLinkWrapper, footerBar, footerCopyright] = footer.children; + // 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; openExternalLinksInNewTab(footer); - const headings = footer.querySelectorAll('h1, h2, h3, h4, h5, h6'); - [...headings].forEach((heading) => heading.classList.add('footer__title')); - - if (mainLinkWrapper && !isRecallTemplate) { + 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 @@ -80,8 +86,8 @@ export default async function decorate(block) { title.addEventListener('click', (e) => toggleExpand(e.currentTarget)); }); - } else if (isRecallTemplate) { - mainLinkWrapper.remove(); + } else { + [footerBar, footerCopyright] = footer.children; } const copyrightWrapper = createElement('div', { classes: 'footer-copyright-wrapper' }); From e102c935955ca377d283edce1811e2901b4cd1fc Mon Sep 17 00:00:00 2001 From: Lakshmishri Date: Fri, 27 Oct 2023 11:55:23 +0200 Subject: [PATCH 11/15] Changes for custom header configuration --- blocks/footer/footer.js | 2 +- blocks/header/header.css | 26 ++++++++++++++ blocks/header/header.js | 77 +++++++++++++++++++++++++--------------- 3 files changed, 75 insertions(+), 30 deletions(-) diff --git a/blocks/footer/footer.js b/blocks/footer/footer.js index 6ede6ca4..dfa4c208 100644 --- a/blocks/footer/footer.js +++ b/blocks/footer/footer.js @@ -47,7 +47,7 @@ export default async function decorate(block) { let footerPath = cfg.footer || `${getLanguagePath()}footer`; const isCustomFooter = getMetadata('custom-footer'); if (isCustomFooter) { - footerPath = cfg.footer || `${getLanguagePath()}${getMetadata('custom-footer')}`; + footerPath = cfg.footer || `${getLanguagePath()}${isCustomFooter}`; } const resp = await fetch(`${footerPath}.plain.html`); diff --git a/blocks/header/header.css b/blocks/header/header.css index d53ea1fb..9e9e7898 100644 --- a/blocks/header/header.css +++ b/blocks/header/header.css @@ -510,3 +510,29 @@ gap: 32px; } } + +/* custom header styles */ +.header__custom-action-item { + align-self: center; +} + +.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); +} + +.header__custom .header__link-accordion::after { + content: none; +} \ No newline at end of file diff --git a/blocks/header/header.js b/blocks/header/header.js index e58de341..8da8417d 100644 --- 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'; @@ -23,22 +28,24 @@ const createLogo = (logoWrapper) => { return logoLink || logoImage; }; -const createMainLinks = (mainLinksWrapper) => { +const createMainLinks = (mainLinksWrapper, menuContent) => { const list = mainLinksWrapper.querySelector('ul'); list.setAttribute('id', 'header-main-nav'); list.classList.add(`${blockClass}__main-nav`); list.querySelectorAll('li').forEach((listItem) => { - const accordionContainer = document.createRange().createContextualFragment(` -
    -
    -
    -
    - `); - listItem.classList.add(`${blockClass}__main-nav-item`); - listItem.append(accordionContainer); + if (menuContent) { + const accordionContainer = document.createRange().createContextualFragment(` +
    +
    +
    +
    + `); + listItem.append(accordionContainer); + } }); + list.querySelectorAll('li > a').forEach((link) => { link.classList.add(`${blockClass}__main-nav-link`, `${blockClass}__link`, `${blockClass}__link-accordion`); }); @@ -54,9 +61,16 @@ 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`); + // in case of custome header it will be only CTA no icons + if (link.childNodes.length === 1) { + link.classList.add(`${blockClass}__custom-button`); + link.parentElement.classList.add(`${blockClass}__custom-action-item`); + } + // wrapping text nodes into spans & // adding aria labels (because text labels are hidden on mobile) [...link.childNodes] @@ -89,19 +103,18 @@ const createActions = (actionsWrapper) => { return list; }; -const mobileActions = () => { +const mobileActions = (isCustomHeader) => { const mobileActionsEl = createElement('div', { classes: [`${blockClass}__mobile-actions`] }); const searchLabel = getTextLabel('Search'); const openMenuLabel = getTextLabel('Open menu'); + const searchIconFragmnet = ` + + `; + const actions = document.createRange().createContextualFragment(` - - - + ${!isCustomHeader ? searchIconFragmnet : ''} +