#41 Refactor column block to support multiple text columns

blocks/v2-columns/v2-columns.css

@@ -1,72 +1,77 @@
-.v2-columns {
-  display: flex;
+.v2-columns__row {
   flex-direction: column;
+  display: flex;
+  gap: 0;
+  width: 100%;
+  justify-content: center;
   align-items: center;
 }
 
-.v2-columns__image,
-.v2-columns-content {
+.v2-columns__column--with-image,
+.v2-columns__column--with-text {
   max-width: 343px;
 }
 
-.v2-columns__image img {
+.v2-columns__column--with-image img {
   display: block;
 }
 
-.v2-columns-content {
+.v2-columns__column--with-text {
   display: flex;
   flex-direction: column;
   padding: 40px 0;
 }
 
-.v2-columns-content .v2-columns-content__pretitle {
+.v2-columns__column--with-text .v2-columns__pretitle {
   font-family: var(--ff-accents-regular);
   font-size: var(--accent-2-font-size);
   line-height: var(--accent-2-line-height);
   margin: 0;
 }
 
-.v2-columns-content .v2-columns-content__heading {
+.v2-columns__column--with-text .v2-columns__heading {
   font-size: var(--headline-1-font-size);
   line-height: var(--headline-1-line-height);
   letter-spacing: var(--headline-1-letter-spacing);
   margin: 12px 0;
 }
 
-.v2-columns-content .v2-columns-content__body {
+.v2-columns__column--with-text .v2-columns__body {
   font-size: var(--body-1-font-size);
   margin: 0 0 32px;
 }
 
-.v2-columns-content a.button {
+.v2-columns__column--with-text a.button {
   width: fit-content;
   margin: 0;
 }
 
-.v2-columns-content a.button:not(a.button:first-of-type) {
+.v2-columns__column--with-text a.button:not(a.button:first-of-type) {
   margin: 5px 0 0;
 }
 
 @media (min-width: 744px) {
   .v2-columns {
-    flex-direction: row;
-    justify-content: center;
     width: 100%;
-    column-gap: 56px;
   }
-
-  .v2-columns-content,
-  .v2-columns__image {
+
+  .v2-columns__row {
+    flex-direction: row;
+    gap: 56px;
+  }
+
+  .v2-columns__column--with-text,
+  .v2-columns__column--with-image {
     flex-direction: column;
-    width: 50%;
+    width: 100%;
     padding: 0;
   }
 
-  .v2-columns-content .v2-columns-content__heading {
+  .v2-columns__column--with-text .v2-columns__heading {
     margin: 24px 0 12px;
   }
 
-  .v2-columns-content .v2-columns-content__body {
+  .v2-columns__column--with-text .v2-columns__body {
     margin: 0 0 24px;
   }
-}
+}

blocks/v2-columns/v2-columns.js

@@ -2,50 +2,54 @@ import { createElement } from '../../scripts/common.js';
 
 export default async function decorate(block) {
   const blockName = 'v2-columns';
-  const columnsImage = createElement('div', { classes: `${blockName}__image` });
-  const columnsText = createElement('div', { classes: `${blockName}-content` });
+  const rows = [...block.querySelectorAll(':scope > div')];
+  const columns = [...block.querySelectorAll(':scope > div > div')];
 
-  const columns = [...block.querySelector(':scope > div').children];
-
-  const imageFirst = columns[0].querySelector('picture');
-  // block.classList.add(`image-${imageFirst ? 'first' : 'last'}`);
+  rows.forEach((row) => {
+    row.classList.add(`${blockName}__row`);
+  });
 
-  const picture = block.querySelector('picture');
+  columns.forEach((col) => {
+    col.classList.add(`${blockName}__column`);
 
-  const allTextElmts = block.querySelectorAll('p');
-  const bodyElmts = [];
+    const picture = col.querySelector('picture');
+    const allTextElmts = col.querySelectorAll('p');
+    const bodyElmts = [];
 
-  allTextElmts.forEach((e) => {
-    const nextElmt = e.nextElementSibling;
+    if (picture) {
+      col.classList.add(`${blockName}__column--with-image`);
+    } else {
+      col.classList.add(`${blockName}__column--with-text`);
+    }
 
-    const isButton = [...e.classList].includes('button-container');
-    const isPretitle = nextElmt?.tagName.toLowerCase()[0] === 'h';
+    allTextElmts.forEach((e) => {
+      const nextElmt = e.nextElementSibling;
 
-    if (!isPretitle && !isButton) bodyElmts.push(e);
-  });
-  bodyElmts.forEach((e) => e.classList.add(`${blockName}-content__body`));
+      const isButton = [...e.classList].includes('button-container');
+      const isPretitle = nextElmt?.tagName.toLowerCase()[0] === 'h';
 
-  const buttons = [...block.querySelectorAll('a')];
-  buttons.forEach((btn) => btn.classList.add('button', 'button--large', 'button--primary'));
+      if (!isPretitle && !isButton) bodyElmts.push(e);
+    });
+    bodyElmts.forEach((e) => e.classList.add(`${blockName}__body`));
 
-  const headings = [...block.querySelectorAll('h1, h2, h3, h4, h5, h6')];
-  headings.forEach((heading) => heading.classList.add(`${blockName}-content__heading`));
+    const buttons = [...col.querySelectorAll('a')];
+    buttons.forEach((btn) => {
+      btn.classList.add('button', 'button--large', 'button--primary');
 
-  const pretitleText = headings[0].previousElementSibling;
+      if (btn.parentElement.classList.contains('button-container')) {
+        btn.parentElement.replaceWith(btn);
+      }
+    });
 
-  if (pretitleText) {
-    const pretitle = createElement('span', { classes: `${blockName}-content__pretitle` });
-    pretitle.textContent = pretitleText.textContent;
-    columnsText.append(pretitle);
-  }
+    const headings = [...col.querySelectorAll('h1, h2, h3, h4, h5, h6')];
+    headings.forEach((heading) => heading.classList.add(`${blockName}__heading`));
 
-  columnsImage.append(picture);
-  columnsText.append(...headings, ...bodyElmts, ...buttons);
+    const pretitleText = headings[0]?.previousElementSibling;
 
-  block.textContent = '';
-  if (imageFirst) {
-    block.append(columnsImage, columnsText);
-  } else {
-    block.append(columnsText, columnsImage);
-  }
+    if (pretitleText) {
+      const pretitle = createElement('span', { classes: `${blockName}__pretitle` });
+      pretitle.textContent = pretitleText.textContent;
+      pretitleText.replaceWith(pretitle);
+    }
+  });
 }