diff --git a/blocks/editorial-promo/editorial-promo.css b/blocks/editorial-promo/editorial-promo.css new file mode 100644 index 0000000..f09f949 --- /dev/null +++ b/blocks/editorial-promo/editorial-promo.css @@ -0,0 +1,53 @@ +.editorial-promo ul { + list-style: none; + margin: 0; + padding: 0; + display: flex; + flex-direction: column; + gap: 16px; +} + +.editorial-promo li { + margin: 0; + padding: 0; +} + +.editorial-promo-link { + display: flex; + gap: 16px; + text-decoration: none; + color: inherit; + transition: opacity 0.2s ease; +} + +.editorial-promo-link:hover { + opacity: 0.8; +} + +.editorial-promo-image { + flex-shrink: 0; + width: 161px; + height: 121px; + overflow: hidden; + line-height: 0; +} + +.editorial-promo-image img { + width: 100%; + height: 100%; + object-fit: cover; +} + +.editorial-promo-text { + flex: 1; + display: flex; + align-items: center; + font-weight: 600; + font-size: 16px; + line-height: 1.3; + color: #000; +} + +.editorial-promo-link:hover .editorial-promo-text { + text-decoration: underline; +} diff --git a/blocks/editorial-promo/editorial-promo.js b/blocks/editorial-promo/editorial-promo.js new file mode 100644 index 0000000..8e453f1 --- /dev/null +++ b/blocks/editorial-promo/editorial-promo.js @@ -0,0 +1,51 @@ +import { createOptimizedPicture } from '../../scripts/aem.js'; + +/** + * loads and decorates the editorial promo block + * @param {Element} block The block element + */ +export default function decorate(block) { + // Convert block to unordered list + const ul = document.createElement('ul'); + [...block.children].forEach((row) => { + const li = document.createElement('li'); + + // Extract image and link from row + const imageDiv = row.children[0]; + const linkDiv = row.children[1]; + + if (imageDiv && linkDiv) { + // Create link wrapper + const link = linkDiv.querySelector('a'); + if (link) { + const anchor = document.createElement('a'); + anchor.href = link.href; + anchor.className = 'editorial-promo-link'; + + // Add image container + const imageContainer = document.createElement('div'); + imageContainer.className = 'editorial-promo-image'; + const picture = imageDiv.querySelector('picture'); + if (picture) { + const img = picture.querySelector('img'); + if (img) { + imageContainer.append(createOptimizedPicture(img.src, img.alt, false, [{ width: '161' }])); + } + } + + // Add text container + const textContainer = document.createElement('div'); + textContainer.className = 'editorial-promo-text'; + textContainer.textContent = link.textContent; + + anchor.append(imageContainer); + anchor.append(textContainer); + li.append(anchor); + } + } + + ul.append(li); + }); + + block.replaceChildren(ul); +}