diff --git a/blocks/v2-specifications/v2-specifications.css b/blocks/v2-specifications/v2-specifications.css index e2b197bb1..00bca1e67 100644 --- a/blocks/v2-specifications/v2-specifications.css +++ b/blocks/v2-specifications/v2-specifications.css @@ -44,6 +44,11 @@ line-height: var(--headline-5-line-height); } +.v2-specifications__list--subtitle { + margin-bottom: 24px; + margin-top: 24px; +} + /* With Text */ /* stylelint-disable-next-line no-descending-specificity */ .v2-specifications__list--with-text { diff --git a/blocks/v2-specifications/v2-specifications.js b/blocks/v2-specifications/v2-specifications.js index e1157d817..cba04a76b 100644 --- a/blocks/v2-specifications/v2-specifications.js +++ b/blocks/v2-specifications/v2-specifications.js @@ -44,6 +44,7 @@ export default async function decorate(block) { const headingString = headings.join(','); const headingsList = [...block.querySelectorAll(headingString)]; headingsList.forEach((heading) => heading.classList.add(`${blockName}__subtitle`, 'h5')); + const subtitleCounter = item.querySelectorAll(`.${blockName}__subtitle`).length; if (typeTitle) { if (accordion) { @@ -77,13 +78,16 @@ export default async function decorate(block) { item.remove(); } + const classes = []; + if (subtitleCounter) classes.push(`${blockName}__list--subtitle`); + // apply classes to the content based on items inside if (typePicture) { - item.classList.add(`${blockName}__list--with-pictures`); + classes.push(`${blockName}__list--with-pictures`); } if (typeDownloads) { - item.classList.add(`${blockName}__list--with-downloads`); + classes.push(`${blockName}__list--with-downloads`); const buttons = item.querySelectorAll('.button'); buttons.forEach((bt) => { @@ -93,12 +97,12 @@ export default async function decorate(block) { } if (!typePicture && !typeDownloads && !typeTitle) { - item.classList.add(`${blockName}__list--with-text`); + classes.push(`${blockName}__list--with-text`); } - accordionContent.appendChild(item); + item.classList.add(...classes); - removeEmptyTags(item); + accordionContent.appendChild(item); }); // close last accordion content @@ -108,5 +112,7 @@ export default async function decorate(block) { block.appendChild(accordionWrapper); } + removeEmptyTags(block); + await loadBlock(accordionBlock); }