From d3fcea265748a2126402eba78d3f55d2d3a845b6 Mon Sep 17 00:00:00 2001 From: SantiagoHomps-NC Date: Mon, 5 Feb 2024 11:58:56 +0100 Subject: [PATCH] block done --- blocks/v2-resources/v2-resources.css | 36 ++++++++++++++++++++++++++++ blocks/v2-resources/v2-resources.js | 35 +++++++++++++++++++++++++++ 2 files changed, 71 insertions(+) create mode 100644 blocks/v2-resources/v2-resources.css create mode 100644 blocks/v2-resources/v2-resources.js diff --git a/blocks/v2-resources/v2-resources.css b/blocks/v2-resources/v2-resources.css new file mode 100644 index 000000000..30e2e2b62 --- /dev/null +++ b/blocks/v2-resources/v2-resources.css @@ -0,0 +1,36 @@ +.section.v2-resources-container { + padding: 0 0 90px; +} + +.section.v2-resources-container .v2-resources-wrapper { + padding: 40px 16px; +} + +.v2-resources__heading { + font-family: var(--ff-headline-medium); + margin: 0; +} + +.v2-resources__subtitle { + margin: 40px 0 0; +} + +.v2-resources__text { + margin: 5px 0; +} + +a.v2-resources__link { + display: block; + color: var(--text-color); + font-size: var(--body-font-size-xs); + line-height: var(--body-2-line-height); + width: fit-content; + margin-top: 15px; + border-bottom: 1px solid transparent; +} + +a.v2-resources__link:hover { + text-decoration: none; + color: var(--c-tertiary-cool-gray); + border-color: var(--c-tertiary-cool-gray); +} \ No newline at end of file diff --git a/blocks/v2-resources/v2-resources.js b/blocks/v2-resources/v2-resources.js new file mode 100644 index 000000000..97b450a17 --- /dev/null +++ b/blocks/v2-resources/v2-resources.js @@ -0,0 +1,35 @@ +export default async function decorate(block) { + const blockName = 'v2-resources'; + + const contentWrapper = block.querySelector(':scope > div'); + contentWrapper.classList.add(`${blockName}__content-wrapper`); + + const columns = [...block.querySelectorAll(':scope > div > div')]; + + const [headerCol, contentCol] = columns; + + headerCol.classList.add(`${blockName}__header`); + contentCol.classList.add(`${blockName}__content`); + + const header = [...headerCol.querySelectorAll('h1, h2, h3, h4, h5, h6')]; + header[0].classList.add(`${blockName}__heading`); + + const subtitles = [...contentCol.querySelectorAll('h1, h2, h3, h4, h5, h6')]; + subtitles.forEach((subt) => subt.classList.add(`${blockName}__subtitle`)); + + const contentElmts = [...contentCol.children]; + + contentElmts.forEach((el, idx) => { + const tagName = el.tagName.toLowerCase(); + const isButton = [...el.classList].includes('button-container'); + if (tagName === 'p' && !isButton) { + el.classList.add(`${blockName}__text`); + } else if (tagName === 'p' && isButton) { + const link = el.querySelector('a'); + link.classList.add(`${blockName}__link`); + link.classList.remove('button--primary', 'button'); + contentElmts[idx - 1].insertAdjacentElement('afterend', link); + el.remove(); + } + }); +}