KAW-7745 Add columns variants

blocks/columns/columns.css

@@ -1,3 +1,4 @@
+/* stylelint-disable no-descending-specificity */
 .columns > div {
   display: flex;
   flex-direction: column;
@@ -44,6 +45,90 @@
   padding: 0;
 }
 
+/* styles for column gallery variant */
+.columns.gallery {
+  display: flex;
+  flex-direction: column;
+  gap: 30px;
+}
+
+.columns.gallery > div {
+  flex-direction: row;
+}
+
+.columns.gallery .columns-img-col {
+  position: relative;
+}
+
+.columns.gallery .columns-img-col::after {
+  content: '';
+  transition: .3s ease-out;
+  transition-property: opacity;
+  opacity: 0;
+  width: 100%;
+  height: 100%;
+  display: block;
+  top: 0;
+  position: absolute;
+  left: 0;
+  background: rgb(34 34 34 / 80%);
+}
+
+.columns.gallery .columns-img-col:hover::after,
+.columns.gallery .columns-img-col:hover:active {
+  opacity: 1;
+}
+
+/* styles for columns location variant */
+.columns.locations {
+  display: flex;
+  flex-direction: column
+}
+
+.columns.locations,
+.columns.locations > div {
+  gap: 60px;
+}
+
+.columns.locations > div > div {
+  gap: 60px;
+  margin: 0;
+  position: relative;
+  text-wrap: wrap;
+  overflow-wrap: anywhere;
+}
+
+.columns.locations > div > div::after {
+  content: "";
+  position: absolute;
+  border-top: 1px solid #e5e5e5;
+  left: 0;
+  width: 100%;
+  bottom: -30px;
+}
+
+.columns.locations > div:last-of-type > div:last-of-type {
+  padding-bottom: 30px;
+}
+
+.columns.locations > div:last-of-type > div:last-of-type::after {
+  border: unset;
+}
+
+/* styles for produsts variant */
+.columns.products .icon {
+  max-width: 400px;
+  width: auto;
+  height: auto;
+  display: block;
+  margin: auto;
+}
+
+/* ratio variants */
+.columns.ratio > div > div {
+  margin: unset;
+}
+
 @media (width >= 640px) {
   /* styles for column grid variant */
   .columns.grid > div {
@@ -84,8 +169,40 @@
     padding-top: 0;
   }
 
-  .columns.grid > div .col-wide, 
+  .columns.grid > div .col-wide,
   .columns.grid > div .col-narrow {
     flex-basis: 0;
   }
+
+  /* styles for column gallery variant */
+  .columns.gallery {
+    gap: 40px;
+  }
+
+  .columns.locations {
+    padding-bottom: 40px;
+  }
+
+  .columns.locations > div {
+    align-items: stretch;
+  }
+
+  .columns.locations > div > div::after {
+    border-top: unset;
+    border-right: 1px solid #e5e5e5;
+    height: 100%;
+    right: -20px;
+    top: 0;
+    width: 1px;
+    left: unset;
+  }
+
+  .columns.locations > div > div:last-of-type::after {
+    display: none;
+  }
+
+  /* ratio variants */
+  .columns.ratio > div {
+    display: grid;
+  }
 }

blocks/columns/columns.js

@@ -1,3 +1,5 @@
+import { createOptimizedPicture } from '../../scripts/aem.js';
+
 const borderClassName = 'border-top';
 
 export default function decorate(block) {
@@ -13,9 +15,25 @@ export default function decorate(block) {
   const isDownloadVariant = block.classList.contains('download');
 
   const isGridVariant = block.classList.contains('grid');
+  const isGalleryVariant = block.classList.contains('gallery');
+  const ratioClass = [...block.classList].find((cl) => cl.startsWith('ratio-'));
+  let rationNumbers;
+
+  if (ratioClass) {
+    const regex = /(\d+)/g;
+
+    rationNumbers = [...ratioClass.matchAll(regex).map((match) => parseInt(match[1], 10))];
+    block.classList.add('ratio');
+  }
+
   // setup image columns
   [...block.children].forEach((row) => {
     const rows = [...row.children];
+
+    if (rationNumbers) {
+      row.style.gridTemplateColumns = rationNumbers.map((v) => `${v}fr`).join(' ');
+    }
+
     rows.forEach((col, index) => {
       const pic = col.querySelector('picture');
       if (pic) {
@@ -47,6 +65,22 @@ export default function decorate(block) {
           col.classList.add('col-narrow');
         }
       }
+
+      // handel gallery variant
+      if (isGalleryVariant) {
+        const imageSrc = pic.querySelector('img').src;
+        const breakpoints = [
+          { media: '(min-width: 1800px)', width: '620' },
+          { media: '(min-width: 1500px)', width: '460' },
+          { media: '(min-width: 1200px)', width: '345' },
+          { media: '(min-width: 960px)', width: '238' },
+          { media: '(min-width: 640px)', width: '218' },
+          { width: '138' },
+        ];
+        const newPic = createOptimizedPicture(imageSrc, '', false, breakpoints);
+
+        pic.replaceWith(newPic);
+      }
     });
   });
 }

styles/styles.css

@@ -116,6 +116,10 @@ address, dl, fieldset, figure, ol, p, pre, ul {
   margin: 0 0 20px;
 }
 
+ul {
+  padding: 0 0 0 30px;
+}
+
 code {
   padding: 0.125em;
 }