diff --git a/blocks/v2-columns/v2-columns.css b/blocks/v2-columns/v2-columns.css index 84d28f49b..342ebc8fb 100644 --- a/blocks/v2-columns/v2-columns.css +++ b/blocks/v2-columns/v2-columns.css @@ -36,6 +36,7 @@ display: flex; flex-direction: column; padding: 40px 0; + gap: 12px; } .v2-columns__heading { @@ -48,12 +49,17 @@ } .v2-columns__column--with-text .v2-columns__heading { - margin: 12px 0; + margin: 0; +} + +.v2-columns__column--with-text .pretitle { + margin-bottom: 12px; } .v2-columns__column--with-text .v2-columns__body { font-size: var(--body-1-font-size); - margin: 0 0 32px; + margin-top: 0; + margin-bottom: 0; } .v2-columns__column--with-text .v2-columns__body a { @@ -62,12 +68,17 @@ text-decoration: none; } +.v2-columns__column--with-text .button-container { + margin: 0; +} + .v2-columns__column--with-text a.button { width: fit-content; - margin-top: 12px; + margin-top: 20px; + margin-bottom: 0; } -.v2-columns__column--with-text a.button:not(a.button:first-of-type) { +.v2-columns-container:not(.v2-columns-container--with-background-image) .v2-columns__column--with-text a.button:not(a.button:first-of-type) { margin: 5px 0 0; } @@ -95,66 +106,53 @@ } .v2-columns .v2-columns__column--with-text .v2-columns__heading { - margin: 24px 0 12px; font-size: var(--headline-1-font-size); } - .v2-columns__column--with-text .v2-columns__body { - margin: 0 0 14px; - } - .v2-columns__column--with-text ul.v2-columns__body { margin: 0; } + + .v2-columns__column--with-text a.button { + margin-top: 12px; + } } /* TRUCKS VARIATIONS STYLING */ -.redesign-v2 .v2-columns__trucks .v2-columns-wrapper { +.redesign-v2 .v2-columns-container--with-background-image .v2-columns-wrapper { padding: 40px 16px; width: 100%; } -.redesign-v2 .section--with-background.v2-columns__trucks > picture img { +.redesign-v2 .section--with-background.v2-columns-container--with-background-image > picture img { position: relative; aspect-ratio: 1/1; } -.v2-columns__trucks .v2-columns__column--with-text { - padding: 0; +.v2-columns-container--with-background-image .v2-columns__column--with-text { + padding: 24px 0 0; } -.v2-columns.v2-columns--trucks .v2-columns__heading { - margin: 28px 0 10px; +.v2-columns.v2-columns--with-background-image .v2-columns__heading.with-marker::before { + top: -24px; } -.v2-columns.v2-columns--trucks .v2-columns__heading.with-marker::before { - top: -28px; -} - -.v2-columns.v2-columns--trucks .v2-columns__column p { - margin-bottom: 10px; -} - -.v2-columns.v2-columns--trucks .v2-columns__column p.no-header { - margin-top: 24px; -} /* stylelint-disable-next-line no-descending-specificity */ -.v2-columns.v2-columns--trucks .v2-columns__btn-section a.button, -.v2-columns.v2-columns--trucks .v2-columns__btn-section a.button:not(a.button:first-of-type) { - margin: 16px 0 0; +.v2-columns.v2-columns--with-background-image .v2-columns__btn-section a.button, +.v2-columns.v2-columns--with-background-image .v2-columns__btn-section a.button:not(a.button:first-of-type) { width: 100%; } -.v2-columns.v2-columns--trucks .v2-columns__btn-section { +.v2-columns.v2-columns--with-background-image .v2-columns__btn-section { display: flex; flex-direction: row; gap: 16px; } @media (min-width: 744px) { - .redesign-v2 .v2-columns__trucks .v2-columns-wrapper { + .redesign-v2 .v2-columns-container--with-background-image .v2-columns-wrapper { background-color: var(--c-primary-white); position: absolute; top: calc(200% * 0.125); @@ -162,33 +160,20 @@ padding: 40px; margin-left: 72px; } - - .v2-columns.v2-columns--trucks .v2-columns__heading { - margin-bottom: 12px; - } - .v2-columns.v2-columns--trucks .v2-columns__column p { - margin-bottom: 12px; - } - - .v2-columns.v2-columns--trucks .v2-columns__column p.no-header { - margin-top: 0; - } - - .v2-columns.v2-columns--trucks .v2-columns__btn-section a.button, - .v2-columns.v2-columns--trucks .v2-columns__btn-section a.button:not(a.button:first-of-type) { - margin-top: 32px; + .v2-columns.v2-columns--with-background-image .v2-columns__btn-section a.button, + .v2-columns.v2-columns--with-background-image .v2-columns__btn-section a.button:not(a.button:first-of-type) { max-width: 140px; } } @media (min-width: 1200px) { - .redesign-v2 .v2-columns__trucks .v2-columns-wrapper { + .redesign-v2 .v2-columns-container--with-background-image .v2-columns-wrapper { left: calc(calc(100% - var(--wrapper-width)) / 2); margin-left: 56px; } - .redesign-v2 .section--with-background.v2-columns__trucks > picture img { + .redesign-v2 .section--with-background.v2-columns-container--with-background-image > picture img { aspect-ratio: 240 / 139; } } diff --git a/blocks/v2-columns/v2-columns.js b/blocks/v2-columns/v2-columns.js index baaebab16..49c36ab42 100644 --- a/blocks/v2-columns/v2-columns.js +++ b/blocks/v2-columns/v2-columns.js @@ -4,10 +4,10 @@ export default async function decorate(block) { const blockParent = block.parentElement.parentElement; const blockName = 'v2-columns'; - const variantClasses = ['trucks']; + const variantClasses = ['with-background-image']; variantsClassesToBEM(block.classList, variantClasses, blockName); - const isTruckVariant = block.classList.contains(`${blockName}--trucks`); + const isBackgroundImageVariant = block.classList.contains(`${blockName}--with-background-image`); const hasHeader = blockParent.classList.contains('header-with-mark'); const rows = [...block.querySelectorAll(':scope > div')]; @@ -43,22 +43,18 @@ export default async function decorate(block) { block.querySelectorAll(`ul.${blockName}__body li`).forEach((item) => { item.classList.add('li--hyphen'); }); - const buttons = [...col.querySelectorAll('.button-container a')]; - if (isTruckVariant) { - if (!hasHeader) bodyElmts[0].classList.add('no-header'); - blockParent.classList.add(`${blockName}__trucks`); - + if (isBackgroundImageVariant) { + blockParent.classList.add(`${blockName}-container--with-background-image`); const btnSection = createElement('div', { classes: `${blockName}__btn-section` }); - const lastbodyElmt = bodyElmts[bodyElmts.length - 1]; - lastbodyElmt.insertAdjacentElement('afterend', btnSection); buttons.forEach((btn) => { const btnContainer = btn.closest('.button-container'); btnContainer.replaceWith(btn); btnSection.append(btn); }); + if (!picture) col.append(btnSection); if (hasHeader) { const defaultContent = blockParent.querySelector('.default-content-wrapper'); @@ -70,8 +66,6 @@ export default async function decorate(block) { } else { buttons.forEach((btn) => { btn.classList.add('button--large'); - const btnContainer = btn.closest('.button-container'); - btnContainer.replaceWith(btn); }); }