diff --git a/blocks/forms/forms.js b/blocks/forms/forms.js index 18eaf384..78058457 100644 --- a/blocks/forms/forms.js +++ b/blocks/forms/forms.js @@ -1,25 +1,15 @@ -import { readBlockConfig } from '../../scripts/aem.js'; +import { passFormConfig, extractTableData } from '../../scripts/aem.js'; let formConfig = {}; -export default function decorate(block) { - formConfig = readBlockConfig(block); +export default async function decorate(block) { + const table = block.querySelector('table'); + formConfig = await extractTableData(table); const form = document.createElement('div'); form.id = formConfig.target; form.classList.add('content'); - block.textContent = ''; - block.append(form); -} - -export function isForm() { - return !!formConfig.target; -} - -export function buildForm(hbspt) { - hbspt.forms.create({ - region: formConfig.region, - portalId: formConfig.portalid, - formId: formConfig.formid, - target: `#${formConfig.target}`, - }); + if (table) { + table.replaceWith(form); + } + passFormConfig(formConfig); } diff --git a/blocks/sidebar-form/sidebar-form.js b/blocks/sidebar-form/sidebar-form.js index 1058fd1e..78058457 100644 --- a/blocks/sidebar-form/sidebar-form.js +++ b/blocks/sidebar-form/sidebar-form.js @@ -1,24 +1,15 @@ -import { readBlockConfig } from '../../scripts/aem.js'; +import { passFormConfig, extractTableData } from '../../scripts/aem.js'; let formConfig = {}; -export default function decorate(block) { - formConfig = readBlockConfig(block); +export default async function decorate(block) { + const table = block.querySelector('table'); + formConfig = await extractTableData(table); const form = document.createElement('div'); form.id = formConfig.target; - block.textContent = ''; - block.append(form); -} - -export function isForm() { - return !!formConfig.target; -} - -export function buildForm(hbspt) { - hbspt.forms.create({ - region: formConfig.region, - portalId: formConfig.portalid, - formId: formConfig.formid, - target: `#${formConfig.target}`, - }); + form.classList.add('content'); + if (table) { + table.replaceWith(form); + } + passFormConfig(formConfig); } diff --git a/blocks/sidebar-rte/sidebar-rte.css b/blocks/sidebar-rte/sidebar-rte.css new file mode 100644 index 00000000..4976808a --- /dev/null +++ b/blocks/sidebar-rte/sidebar-rte.css @@ -0,0 +1,33 @@ +.sidebar-rte { + padding: 7%; + margin-top: 25px; + background-color: transparent; + border: none; + box-shadow: 0 2px 15px rgba(0 0 0 / 10%); + border-radius: 4px; + display: block; +} + +.sidebar-rte ul li::before { + content: ''!important; +} + +.sidebar-rte ul li { + padding-left: 0.5em 0 0.5em 0!important; + font-size: 16px!important; + color: #0d233e!important; +} + +.sidebar-rte ul li a { + font-size: 16px!important; + color: #0d233e!important; +} + +.sidebar-rte img { + width: 100%; + max-width: 100%; +} + +.sidebar-rte .button { + width: 100%; +} diff --git a/blocks/sidebar-rte/sidebar-rte.js b/blocks/sidebar-rte/sidebar-rte.js new file mode 100644 index 00000000..f120024f --- /dev/null +++ b/blocks/sidebar-rte/sidebar-rte.js @@ -0,0 +1,19 @@ +export default function decorate(block) { + if (block.classList.contains('hyperlink')) { + const images = block.querySelectorAll('picture'); + images.forEach((image) => { + const { parentElement } = image; + const { nextSibling } = parentElement; + if (nextSibling) { + const nextNextSibling = nextSibling.nextSibling; + if (nextNextSibling) { + const link = nextNextSibling.querySelector('a'); + if (link && link.classList.contains('secondary')) { + link.innerHTML = ''; + link.appendChild(image); + } + } + } + }); + } +} diff --git a/scripts/aem.js b/scripts/aem.js index 92c52e89..8380180e 100644 --- a/scripts/aem.js +++ b/scripts/aem.js @@ -21,6 +21,7 @@ * @param {string} data.target subject of the checkpoint event, * for instance the href of a link, or a search term */ +const formConfigData = []; function sampleRUM(checkpoint, data = {}) { sampleRUM.defer = sampleRUM.defer || []; const defer = (fnname) => { @@ -254,6 +255,39 @@ async function loadCSS(href) { }); } +function extractTableData(table) { + const tableData = {}; + table.querySelectorAll('tbody tr').forEach((row) => { + const key = row.cells[0].textContent.toLowerCase(); + const value = row.cells[1].textContent; + tableData[key] = value; + }); + return tableData; +} + +function passFormConfig(config) { + formConfigData.push(config); +} + +function isForm() { + return formConfigData.length; +} + +function buildForm(hbspt) { + formConfigData.forEach((formData) => { + const config = { + region: formData.region, + portalId: formData.portalid, + formId: formData.formid, + target: `#${formData.target}`, + }; + if (formData.redirecturl) { + config.redirectUrl = formData.redirecturl; + } + hbspt.forms.create(config); + }); +} + /** * Loads a non module JS file. * @param {string} src URL to the JS file @@ -718,4 +752,8 @@ export { updateSectionsStatus, waitForLCP, capitalizeWords, + passFormConfig, + isForm, + buildForm, + extractTableData, }; diff --git a/scripts/delayed.js b/scripts/delayed.js index c28753b5..1f84e209 100644 --- a/scripts/delayed.js +++ b/scripts/delayed.js @@ -1,6 +1,5 @@ // eslint-disable-next-line import/no-cycle -import { sampleRUM } from './aem.js'; -import { buildForm, isForm } from '../blocks/forms/forms.js'; +import { sampleRUM, buildForm, isForm } from './aem.js'; // Core Web Vitals RUM collection sampleRUM('cwv'); @@ -50,7 +49,7 @@ function loadHubSpot() { hsScriptEl.src = '//js.hsforms.net/forms/v2.js'; document.querySelector('head').append(hsScriptEl); hsScriptEl.addEventListener('load', () => { - buildForm(hbspt); // eslint-disable-line + buildForm(hbspt); // eslint-disable-line }); } diff --git a/styles/Typo.css b/styles/Typo.css index 5dd2884a..fd9c931a 100644 --- a/styles/Typo.css +++ b/styles/Typo.css @@ -273,7 +273,7 @@ body { a { background: transparent; - color: #ec8f2d; + color: var(--primary-color); text-decoration: none; } @@ -509,6 +509,7 @@ body.purple #content ul li::before { button, input, optgroup, +.hs-form input[type="submit"], select, textarea { color: inherit; @@ -629,6 +630,7 @@ textarea:focus { button, input[type="button"], input[type="reset"], +.hs-form input[type="submit"], input[type="submit"] { background-color: var(--primary-color); border-radius: 5px; @@ -651,12 +653,30 @@ input[type="submit"] { width: auto } +.button.secondary { + background-color: transparent; + padding: 0; + border: none; + color: #ec8f2d; + text-transform: none; + font-style: normal; + transition: all .3s ease-in-out; +} + +.button.secondary:hover { + border: none; + color: #ec8f2d; + text-decoration: underline; + transition: all .3s ease-in-out; +} + .blog-pagination a:hover, .button:hover, .cta_button:hover, .hs-button:hover, .readmore:hover, button:hover, +.hs-form input[type="submit"]:hover, input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover { @@ -1565,3 +1585,8 @@ form.hs-form .hs-input[type="checkbox"] { .hs-blog-social-share-list .hs-blog-social-share-item::before { content: ''!important; } + +.block.subscribe .hs_submit { + padding-bottom: 0 +} + diff --git a/styles/template.css b/styles/template.css index 4071a630..36dcecca 100644 --- a/styles/template.css +++ b/styles/template.css @@ -503,42 +503,6 @@ body.full-width #main { width: 100% } -#references { - clear: both; - font-size: 12px; - padding-top: 30px; - width: 100% -} - -#references h6 { - border-top: 1px solid #ccc; - color: inherit; - padding: 20px 0 0 -} - -#references ol { - counter-reset: li; - list-style: none -} - -#references ol li { - line-height: normal; - margin-left: 0; - padding: .4em 0 .4em 1em; - position: relative -} - -#references ol li::before { - color: #000; - content: counter(li); - counter-increment: li; - font-size: 1em; - left: 0; - line-height: 100%; - position: absolute; - top: 10% -} - #sidebar { float: right; font-size: 16px;