KAW-7713 hanlde column grid variant

blocks/columns/columns.css

@@ -8,8 +8,10 @@
   width: 100%;
 }
 
-.columns > div > div {
+.columns > div > div:not(.columns-img-col) {
   order: 1;
+  max-width: 750px;
+  margin: auto;
 }
 
 .columns > div > .columns-img-col {
@@ -24,22 +26,46 @@
   margin-bottom: 0;
 }
 
-@media (width >= 768px) {
-  .columns > div {
+/* styles for column download variant */
+.columns.download > div > div {
+  max-width: 300px;
+  margin: auto;
+}
+
+.columns.download em {
+  color: var(--link-color)
+}
+.download .secondary:any-link {
+  padding: 0;
+}
+
+@media (width >= 640px) {
+  /* styles for column grid variant */
+  .columns.grid > div {
     flex-flow: row wrap;
-    gap: 30px;
     justify-content: center;
   }
 
-  .columns > div > div {
-    width: calc(50% - 15px);
+  .columns.grid > div > div {
+    text-align: center;
+    max-width: 100%;
+    margin: 0;
+  }
+
+  .columns.grid > div .col-wide {
+    flex-basis: 45%;
+  }
+
+  .columns.grid > div .col-narrow {
+    flex-basis: 30%;
   }
 }
 
 @media (width >= 960px) {
   .columns > div {
+    flex-flow: row;
+    justify-content: center;
     align-items: flex-start;
-    flex-wrap: nowrap;
     gap: 40px;
   }
 
@@ -48,4 +74,13 @@
     order: unset;
     width: auto;
   }
+
+  .columns.grid div > .columns-row-wrapper {
+    padding-top: 0;
+  }
+
+  .columns.grid > div .col-wide, 
+  .columns.grid > div .col-narrow {
+    flex-basis: 0;
+  }
 }

blocks/columns/columns.js

@@ -1,10 +1,22 @@
+const borderClassName = 'border-top';
+
 export default function decorate(block) {
   const cols = [...block.firstElementChild.children];
   block.classList.add(`columns-${cols.length}-cols`);
 
+  // handle boder top in download pages
+  const borderClass = block.classList.contains(borderClassName);
+  if (borderClass) {
+    block.parentElement.classList.add(borderClassName);
+    block.classList.remove(borderClassName);
+  }
+  const isDownloadVariant = block.classList.contains('download');
+
+  const isGridVariant = block.classList.contains('grid');
   // setup image columns
   [...block.children].forEach((row) => {
-    [...row.children].forEach((col) => {
+    const rows = [...row.children];
+    rows.forEach((col, index) => {
       const pic = col.querySelector('picture');
       if (pic) {
         const picWrapper = pic.closest('div');
@@ -18,6 +30,22 @@ export default function decorate(block) {
             picWrapperChildren.replaceWith(...picWrapperChildren.children);
           }
         }
+        // handle download variant
+        const button = picWrapper.querySelector('.button');
+        if (button && isDownloadVariant) {
+          button.innerHTML = '';
+          button.append(pic);
+          button.closest('.button-container')?.classList.remove('button-container');
+          picWrapper.prepend(button);
+        }
+      }
+      // handle grid variant
+      if (isGridVariant) {
+        if (index < 2) {
+          col.classList.add('col-wide');
+        } else {
+          col.classList.add('col-narrow');
+        }
       }
     });
   });

scripts/scripts.js

@@ -162,12 +162,3 @@ export function getTextLabel(key) {
 
 placeholders = await fetchPlaceholders();
 loadPage();
-
-export const variantsClassesToBEM = (blockClasses, expectedVariantsNames, blockName) => {
-  expectedVariantsNames.forEach((variant) => {
-    if (blockClasses.contains(variant)) {
-      blockClasses.remove(variant);
-      blockClasses.add(`${blockName}--${variant}`);
-    }
-  });
-};