From 6a7958552f72b1ecf08f2cf00ed5a1d31c49a6cd Mon Sep 17 00:00:00 2001 From: poornimapremananth <85501304+poornima-premananth@users.noreply.github.com> Date: Fri, 13 Mar 2026 00:34:28 +0530 Subject: [PATCH 1/7] Create accordion.css --- blocks/accordion/accordion.css | 206 +++++++++++++++++++++++++++++++++ 1 file changed, 206 insertions(+) create mode 100644 blocks/accordion/accordion.css diff --git a/blocks/accordion/accordion.css b/blocks/accordion/accordion.css new file mode 100644 index 0000000..4f2547d --- /dev/null +++ b/blocks/accordion/accordion.css @@ -0,0 +1,206 @@ +/* ========================= + Accordion Container +========================= */ + +.accordion { + width: 100%; + margin: 2rem 0; +} + +/* ========================= + Accordion Item +========================= */ + +.accordion-item { + overflow: hidden; +} + +/* ========================= + Accordion Header (Button) +========================= */ + +.accordion-header { + width: 100%; + display: flex; + align-items: center; + justify-content: space-between; + padding: 1.25rem 1.5rem; + background-color: #d6ecff; + border: none; + text-align: left; + cursor: pointer; + font-family: var(--heading-font-family, inherit); + font-size: 1.125rem; + font-weight: 600; + color: var(--text-color, #333); + transition: background-color 0.2s ease, color 0.2s ease; + position: relative; +} + +/* Change to lighter color on hover */ +.accordion-header:hover { + background-color: #e8f4ff; +} + +/* Ensure closed accordions always keep light blue background */ +.accordion-item:not(.is-open) .accordion-header { + background-color: #d6ecff !important; +} + +.accordion-item:not(.is-open) .accordion-header:hover { + background-color: #e8f4ff !important; +} + +.accordion-item:not(.is-open) .accordion-header:focus { + background-color: #d6ecff !important; +} + +.accordion-item:not(.is-open) .accordion-header:active { + background-color: #d6ecff !important; +} + +.accordion-header:focus { + outline: 2px solid var(--link-color, #0066cc); + outline-offset: -2px; +} + +.accordion-header:focus:not(:focus-visible) { + outline: none; +} + +/* Opened accordion styling */ +.accordion-item.is-open .accordion-header { + color: var(--text-color, #333); +} + +/* ========================= + Accordion Icon +========================= */ + +.accordion-icon { + flex-shrink: 0; + width: 1.5rem; + height: 1.5rem; + margin-left: 1rem; + position: relative; + transition: transform 0.3s ease; +} + +.accordion-icon::before, +.accordion-icon::after { + content: ''; + position: absolute; + top: 50%; + left: 50%; + background-color: var(--text-color, #333); + transition: background-color 0.2s ease; +} + +.accordion-icon::before { + width: 12px; + height: 2px; + transform: translate(-50%, -50%); +} + +.accordion-icon::after { + width: 2px; + height: 12px; + transform: translate(-50%, -50%); + transition: transform 0.3s ease, opacity 0.3s ease; +} + +.accordion-item.is-open .accordion-icon::after { + transform: translate(-50%, -50%) rotate(90deg); + opacity: 0; +} + +/* Icon color remains default for closed accordions */ + +/* ========================= + Accordion Content +========================= */ + +.accordion-content { + max-height: 0; + overflow: hidden; + transition: max-height 0.3s ease; + padding: 0 1.5rem; +} + +.accordion-item.is-open .accordion-content { + padding-bottom: 1.5rem; + padding-top: 0.5rem; +} + +.accordion-content > * { + margin: 0.75rem 0; +} + +.accordion-content > *:first-child { + margin-top: 0; +} + +.accordion-content > *:last-child { + margin-bottom: 0; +} + +/* ========================= + Content Styling +========================= */ + +.accordion-content h4 { + margin-top: 1.5rem; + margin-bottom: 0.75rem; + font-size: 1rem; + font-weight: 600; +} + +.accordion-content h4:first-child { + margin-top: 0; +} + +.accordion-content ul { + margin: 0.75rem 0; + padding-left: 1.5rem; +} + +.accordion-content li { + margin: 0.5rem 0; + line-height: 1.6; +} + +.accordion-content strong { + font-weight: 600; +} + +/* ========================= + Responsive Design +========================= */ + +@media (width >= 768px) { + .accordion-header { + padding: 1.5rem 2rem; + font-size: 1.25rem; + } + + .accordion-content { + padding-left: 2rem; + padding-right: 2rem; + } + + .accordion-item.is-open .accordion-content { + padding-bottom: 2rem; + } +} + +/* ========================= + Reduced Motion +========================= */ + +@media (prefers-reduced-motion: reduce) { + .accordion-content, + .accordion-icon, + .accordion-icon::after { + transition: none; + } +} From ee683e73a4976b73e80b518e657c830dd3fc059d Mon Sep 17 00:00:00 2001 From: poornimapremananth <85501304+poornima-premananth@users.noreply.github.com> Date: Fri, 13 Mar 2026 00:35:00 +0530 Subject: [PATCH 2/7] Create accordion.js --- blocks/accordion/accordion.js | 88 +++++++++++++++++++++++++++++++++++ 1 file changed, 88 insertions(+) create mode 100644 blocks/accordion/accordion.js diff --git a/blocks/accordion/accordion.js b/blocks/accordion/accordion.js new file mode 100644 index 0000000..45eadaf --- /dev/null +++ b/blocks/accordion/accordion.js @@ -0,0 +1,88 @@ +export default function decorate(block) { + const items = [...block.children]; + + items.forEach((item, index) => { + // Add accordion item class + item.classList.add('accordion-item'); + + // Get title and content divs + const [titleDiv, contentDiv] = [...item.children]; + + if (!titleDiv || !contentDiv) return; + + // Create button for title + const button = document.createElement('button'); + button.className = 'accordion-header'; + button.type = 'button'; + button.id = `accordion-header-${index}`; + button.setAttribute('aria-expanded', index === 0 ? 'true' : 'false'); + button.setAttribute('aria-controls', `accordion-content-${index}`); + + // Move title content to button + while (titleDiv.firstChild) { + button.appendChild(titleDiv.firstChild); + } + + // Add icon + const icon = document.createElement('span'); + icon.className = 'accordion-icon'; + icon.setAttribute('aria-hidden', 'true'); + button.appendChild(icon); + + // Setup content div + contentDiv.className = 'accordion-content'; + contentDiv.id = `accordion-content-${index}`; + contentDiv.setAttribute('role', 'region'); + contentDiv.setAttribute('aria-labelledby', `accordion-header-${index}`); + + // Set initial state (first item open by default) + if (index === 0) { + item.classList.add('is-open'); + contentDiv.style.maxHeight = `${contentDiv.scrollHeight}px`; + } else { + contentDiv.style.maxHeight = '0'; + } + + // Replace title div with button + item.replaceChild(button, titleDiv); + + // Click handler + button.addEventListener('click', () => { + const isOpen = item.classList.contains('is-open'); + + // Close all items (for accordion behavior) + items.forEach((otherItem) => { + if (otherItem !== item) { + otherItem.classList.remove('is-open'); + const otherContent = otherItem.querySelector('.accordion-content'); + const otherButton = otherItem.querySelector('.accordion-header'); + if (otherContent) { + otherContent.style.maxHeight = '0'; + } + if (otherButton) { + otherButton.setAttribute('aria-expanded', 'false'); + } + } + }); + + // Toggle current item + if (isOpen) { + item.classList.remove('is-open'); + contentDiv.style.maxHeight = '0'; + button.setAttribute('aria-expanded', 'false'); + } else { + item.classList.add('is-open'); + contentDiv.style.maxHeight = `${contentDiv.scrollHeight}px`; + button.setAttribute('aria-expanded', 'true'); + } + }); + + // Update max-height when content changes (for dynamic content) + const resizeObserver = new ResizeObserver(() => { + if (item.classList.contains('is-open')) { + contentDiv.style.maxHeight = `${contentDiv.scrollHeight}px`; + } + }); + resizeObserver.observe(contentDiv); + }); +} From 2c79424b95a6ce4909f79b5c7de500d6477119d1 Mon Sep 17 00:00:00 2001 From: poornimapremananth <85501304+poornima-premananth@users.noreply.github.com> Date: Fri, 13 Mar 2026 00:37:33 +0530 Subject: [PATCH 3/7] Update component-models.json --- component-models.json | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/component-models.json b/component-models.json index a1b05db..f3faf4a 100644 --- a/component-models.json +++ b/component-models.json @@ -460,6 +460,27 @@ } ] }, + { + "id": "accordion", + "fields": [] + }, + { + "id": "accordion-item", + "fields": [ + { + "component": "text", + "valueType": "string", + "name": "accordionTitle", + "label": "Accordion Title" + }, + { + "component": "richtext", + "valueType": "string", + "name": "accordionContent", + "label": "Accordion Content" + } + ] + }, { "id": "contact-form", "fields": [ From 4e6c85f5e4acbc2f7c258e5e3f165b0663cb9f33 Mon Sep 17 00:00:00 2001 From: poornimapremananth <85501304+poornima-premananth@users.noreply.github.com> Date: Fri, 13 Mar 2026 00:38:36 +0530 Subject: [PATCH 4/7] Update component-filters.json --- component-filters.json | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/component-filters.json b/component-filters.json index 4b0ddc3..f45e090 100644 --- a/component-filters.json +++ b/component-filters.json @@ -45,6 +45,12 @@ "carousel-cards" ] }, + { + "id": "accordion", + "components": [ + "accordion-item" + ] + }, { "id": "columns", "components": [ @@ -60,4 +66,4 @@ "title" ] } -] \ No newline at end of file +] From e46846c43b435e8b018de89902a60a0b47638579 Mon Sep 17 00:00:00 2001 From: poornimapremananth <85501304+poornima-premananth@users.noreply.github.com> Date: Fri, 13 Mar 2026 00:39:25 +0530 Subject: [PATCH 5/7] Update component-definition.json --- component-definition.json | 32 +++++++++++++++++++++++++++++++- 1 file changed, 31 insertions(+), 1 deletion(-) diff --git a/component-definition.json b/component-definition.json index 343f7f4..af9ab00 100644 --- a/component-definition.json +++ b/component-definition.json @@ -322,6 +322,36 @@ } } }, + { + "title": "Accordion", + "id": "accordion", + "plugins": { + "xwalk": { + "page": { + "resourceType": "core/franklin/components/block/v1/block", + "template": { + "name": "Accordion", + "filter": "accordion" + } + } + } + } + }, + { + "title": "Accordion Item", + "id": "accordion-item", + "plugins": { + "xwalk": { + "page": { + "resourceType": "core/franklin/components/block/v1/block/item", + "template": { + "name": "Accordion Item", + "model": "accordion-item" + } + } + } + } + }, { "title": "Carousel Cards", "id": "carousel-cards", @@ -340,4 +370,4 @@ ] } ] -} \ No newline at end of file +} From 4fea71036574606b95dd318d7c5bd72f004bdfef Mon Sep 17 00:00:00 2001 From: poornimapremananth <85501304+poornima-premananth@users.noreply.github.com> Date: Fri, 13 Mar 2026 00:44:23 +0530 Subject: [PATCH 6/7] Update component-filters.json --- component-filters.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/component-filters.json b/component-filters.json index f45e090..d38a291 100644 --- a/component-filters.json +++ b/component-filters.json @@ -24,7 +24,8 @@ "map", "social-share", "tabs", - "carousel" + "carousel", + "accordion" ] }, { From 3b380b45045f77d22a75f17a79d5c610a0cb08e0 Mon Sep 17 00:00:00 2001 From: Namita Saunshi Date: Fri, 13 Mar 2026 01:24:12 +0530 Subject: [PATCH 7/7] logo card issue --- blocks/logo-cards/logo-cards.js | 53 +++++++++++++++++---------------- 1 file changed, 28 insertions(+), 25 deletions(-) diff --git a/blocks/logo-cards/logo-cards.js b/blocks/logo-cards/logo-cards.js index 50662e5..11aba59 100644 --- a/blocks/logo-cards/logo-cards.js +++ b/blocks/logo-cards/logo-cards.js @@ -1,22 +1,29 @@ import { createOptimizedPicture } from '../../scripts/aem.js'; -import { moveInstrumentation } from '../../scripts/scripts.js'; +import * as scripts from '../../scripts/scripts.js'; export default function decorate(block) { - const rows = [...block.querySelectorAll(':scope > div')]; - const ul = document.createElement('ul'); + const rows = [...block.children]; rows.forEach((row) => { const li = document.createElement('li'); - moveInstrumentation(row, li); + + // Check if moveInstrumentation exists before calling it + if (scripts.moveInstrumentation) { + scripts.moveInstrumentation(row, li); + } const cells = [...row.children]; - const iconCell = cells[0] || null; - const titleCell = cells[1] || null; - const descriptionCell = cells[2] || null; - const ctaCell = cells[3] || null; + // Find cells by content to handle varying table structures in gdrive + const iconCell = cells.find((c) => c.querySelector('picture, img')); + const nonImageCells = cells.filter((c) => c.textContent.trim() && !c.querySelector('picture, img')); + + const titleCell = nonImageCells[0] || null; + const descriptionCell = nonImageCells[1] || null; + const ctaCell = cells.find((c) => c.querySelector('a')); + // Handle Icon let iconWrapper = null; if (iconCell) { const rawImg = iconCell.querySelector('picture > img, img'); @@ -25,14 +32,14 @@ export default function decorate(block) { rawImg.src, rawImg.alt || '', false, - [{ width: '64' }], + [{ width: '80' }], ); + + // Instrumentation for the image specifically const optimizedImg = optimized.querySelector('img'); - if (optimizedImg) { - moveInstrumentation(rawImg, optimizedImg); + if (optimizedImg && scripts.moveInstrumentation) { + scripts.moveInstrumentation(rawImg, optimizedImg); } - const pictureOrImg = rawImg.closest('picture') || rawImg; - pictureOrImg.replaceWith(optimized); iconWrapper = document.createElement('div'); iconWrapper.className = 'logo-card-icon'; @@ -40,28 +47,27 @@ export default function decorate(block) { } } + // Handle Content const content = document.createElement('div'); content.className = 'logo-card-content'; - const titleText = titleCell ? titleCell.textContent.trim() : ''; - if (titleText) { + if (titleCell) { const titleEl = document.createElement('h3'); titleEl.className = 'logo-card-title'; - titleEl.textContent = titleText; + titleEl.textContent = titleCell.textContent.trim(); content.appendChild(titleEl); } - const descriptionText = descriptionCell ? descriptionCell.textContent.trim() : ''; - if (descriptionText) { + if (descriptionCell) { const descEl = document.createElement('p'); descEl.className = 'logo-card-description'; - descEl.textContent = descriptionText; + descEl.textContent = descriptionCell.textContent.trim(); content.appendChild(descEl); } if (ctaCell) { const link = ctaCell.querySelector('a'); - if (link && link.href) { + if (link) { const ctaEl = document.createElement('a'); ctaEl.className = 'logo-card-cta'; ctaEl.href = link.href; @@ -70,13 +76,10 @@ export default function decorate(block) { } } - if (iconWrapper) { - li.appendChild(iconWrapper); - } - + if (iconWrapper) li.appendChild(iconWrapper); li.appendChild(content); ul.appendChild(li); }); block.replaceChildren(ul); -} +} \ No newline at end of file