Merge pull request #68 from Netcentric/24-images-grid

Images grid block

blocks/v2-images-grid/v2-images-grid.css

@@ -0,0 +1,75 @@
+:root {
+  --v2-images-grid-gutter: 8px;
+  --v2-images-grid-padding-space: 24px;
+}
+
+.v2-images-grid__items {
+  padding-left: 0;
+  display: grid;
+  grid-template-columns: 50%;
+  gap: var(--v2-images-grid-gutter);
+  grid-template-areas: 
+    'area1 area2'
+    'area1 area4'
+    'area3 area4';
+  list-style: none;
+  margin-bottom: var(--v2-images-grid-padding-space);
+}
+
+.v2-images-grid__item {
+  margin: 0;
+  width: auto;
+}
+
+.v2-images-grid__picture {
+  display: block;
+  position: relative;
+  height: 100%;
+}
+
+.v2-images-grid__item:nth-child(1) { grid-area: area1; }
+.v2-images-grid__item:nth-child(2) { grid-area: area2; }
+.v2-images-grid__item:nth-child(3) { grid-area: area3; }
+.v2-images-grid__item:nth-child(4) { grid-area: area4; }
+
+.v2-images-grid__item img {
+  object-fit: cover;
+  width: 100%;
+  display: block;
+  height: 100%;
+}
+
+.v2-images-grid__item:nth-child(1) img,
+.v2-images-grid__item:nth-child(4) img {
+  aspect-ratio: 1/1;
+}
+
+.v2-images-grid__item:nth-child(2) img,
+.v2-images-grid__item:nth-child(3) img {
+  aspect-ratio: 4/3;
+}
+
+.v2-images-grid__figcaption {
+  display: none;
+}
+
+@media screen and (min-width: 1200px) {
+  :root {
+    --v2-images-grid-gutter: 16px;
+    --v2-images-grid-padding-space: 40px;
+  }
+
+  .v2-images-grid__figcaption {
+    display: block;
+    text-align: center;
+    position: absolute;
+    bottom: 10px;
+    padding: 9px 9px 7px;
+    color: var(--c-primary-white);
+    background-color: var(--c-secondary-graphite);
+    right: 10px;
+    text-transform: uppercase;
+    font: 12px/16px var(--ff-body-bold);
+    letter-spacing: 1.92px;
+  }
+}

blocks/v2-images-grid/v2-images-grid.js

@@ -0,0 +1,55 @@
+import { createOptimizedPicture } from '../../scripts/lib-franklin.js';
+import { createElement, removeEmptyTags, getTextLabel } from '../../scripts/common.js';
+import { getAllElWithChildren } from '../../scripts/scripts.js';
+
+const blockClassName = 'v2-images-grid';
+export default function decorate(block) {
+  // all items are inside a ul list with classname called 'v2-images-grid__items'
+  const ul = createElement('ul', { classes: `${blockClassName}__items` });
+  [...block.querySelectorAll(':scope > div > div')].forEach((cell) => {
+    // If cell contain any element, we add them in the ul
+    if (cell.childElementCount) {
+      const li = createElement('li', { classes: [`${blockClassName}__item`] });
+      li.append(...cell.childNodes);
+      ul.append(li);
+    }
+    cell.remove();
+  });
+  block.append(ul);
+
+  // give format to the first 4 list items
+  [...ul.children].forEach((li, idx) => {
+    if (idx < 4) {
+      const captionEle = getAllElWithChildren(li.querySelectorAll('p'), 'picture', true)[0];
+      let picture = li.querySelector('picture');
+
+      if (picture) {
+        const img = picture.lastElementChild;
+        // no width provided because we are using object-fit, we need the biggest option
+        const newPicture = createOptimizedPicture(img.src, captionEle.textContent, false);
+        picture.replaceWith(newPicture);
+        picture = newPicture;
+        picture.classList.add(`${blockClassName}__picture`);
+        // use figcaption for text
+        const figCaption = createElement('figcaption', { classes: `${blockClassName}__figcaption` });
+        figCaption.textContent = captionEle.textContent;
+        picture.append(figCaption);
+      }
+
+      li.innerHTML = '';
+
+      li.append(picture);
+      return;
+    }
+    li.remove();
+  });
+
+  const button = createElement('a', {
+    classes: ['button', 'button--large', 'button--primary'],
+  });
+  button.textContent = getTextLabel('Open Gallery');
+  block.append(button);
+
+  // remove empty tags
+  removeEmptyTags(block);
+}

placeholder.json

@@ -1,7 +1,7 @@
 {
-  "total": 21,
+  "total": 22,
   "offset": 0,
-  "limit": 21,
+  "limit": 22,
   "data": [
     {
       "Key": "Low resolution video message",
@@ -86,6 +86,10 @@
     {
       "Key": "channel aria label",
       "Text": "channel"
+    },
+    {
+      "Key": "Open Gallery",
+      "Text": "Open Gallery"
     }
   ],
   ":type": "sheet"

styles/styles.css

@@ -987,9 +987,9 @@ main .section.responsive-title h1 {
   }
 
   .redesign-v2 .section > div {
+    max-width: var(--wrapper-width);
     padding: 0;
     margin: 0 auto;
-    max-width: 1040px;
   }
 
   .redesign-v2 .with-marker::before {