review comment changes

Netcentric · Dec 20, 2023 · bb6a6aa · bb6a6aa
1 parent f997bc8
commit bb6a6aa
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 59 deletions.
diff --git 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,100 +106,74 @@
   }
 
   .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);
     max-width: 485px;
     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
@@ -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);
       });
     }