From a9a453c198e0d767ea162faca18ec017ad82b60e Mon Sep 17 00:00:00 2001
From: Sean Archibeque <sean.archibeque@gmail.com>
Date: Thu, 9 May 2024 22:10:24 -0600
Subject: [PATCH] MWPW-137282 - [Action Items] Centered in the grid/scroller
 (#2237)

functionality to justify center items within a grid

Co-authored-by: Okan Sahin <39759830+mokimo@users.noreply.github.com>
---
 libs/blocks/action-item/action-item.css       |  5 +++
 .../action-scroller/action-scroller.css       | 13 +++++--
 .../blocks/action-scroller/action-scroller.js | 37 +++++++------------
 libs/blocks/icon-block/icon-block.css         |  8 ----
 .../section-metadata/section-metadata.css     | 22 +++++++----
 .../action-scroller/action-scroller.test.js   |  1 +
 test/blocks/action-scroller/mocks/body.html   | 37 ++++++++++++++++++-
 7 files changed, 78 insertions(+), 45 deletions(-)

diff --git a/libs/blocks/action-item/action-item.css b/libs/blocks/action-item/action-item.css
index 4ee91d0c78..b8c4b2fb7f 100644
--- a/libs/blocks/action-item/action-item.css
+++ b/libs/blocks/action-item/action-item.css
@@ -1,5 +1,6 @@
 .action-item {
   display: flex;
+  width: 160px;
 }
 
 .action-item img {
@@ -89,6 +90,10 @@
   max-height: var(--spacing-xxxl);
 }
 
+.action-item.float-icon {
+  margin: 0 var(--spacing-xs);
+}
+
 .action-item.float-icon .floated-icon img {
   width: 24px;
   min-height: 24px;
diff --git a/libs/blocks/action-scroller/action-scroller.css b/libs/blocks/action-scroller/action-scroller.css
index 87d4b93359..c346aa7c44 100644
--- a/libs/blocks/action-scroller/action-scroller.css
+++ b/libs/blocks/action-scroller/action-scroller.css
@@ -12,16 +12,18 @@
 
 .action-scroller .scroller {
   display: grid;
-  grid-template-columns: repeat(var(--action-scroller-columns), 1fr);
-  grid-auto-columns: minmax(var(--action-scroller-column-width), 1fr);
+  grid-template-columns: repeat(var(--action-scroller-columns), var(--action-scroller-item-width));
+  grid-auto-columns: minmax(var(--action-scroller-column-width), var(--action-scroller-item-width));
   grid-auto-flow: column;
-  gap: var(--spacing-m);
+  gap: var(--spacing-xs);
   padding: 0 var(--action-scroller-mobile-padding);
   overflow-x: auto;
   -ms-overflow-style: none;
   scrollbar-width: none;
   scroll-behavior: smooth;
+}
 
+.action-scroller .scroller[hide-mask='false'] {
   --mask-width: 60px;
   --mask-image-content: linear-gradient(to right,
       transparent,
@@ -45,7 +47,6 @@
   mask-repeat: no-repeat, no-repeat;
 }
 
-
 .action-scroller .scroller::-webkit-scrollbar {
   display: none;
 }
@@ -139,4 +140,8 @@
     width: var(--grid-container-width);
     margin: 0 auto;
   }
+
+  .action-scroller .justify-center {
+    justify-content: center;
+  }
 }
diff --git a/libs/blocks/action-scroller/action-scroller.js b/libs/blocks/action-scroller/action-scroller.js
index 5ff1e69189..2ae2637d90 100644
--- a/libs/blocks/action-scroller/action-scroller.js
+++ b/libs/blocks/action-scroller/action-scroller.js
@@ -3,10 +3,7 @@ import { createTag, getConfig } from '../../utils/utils.js';
 const { miloLibs, codeRoot } = getConfig();
 const base = miloLibs || codeRoot;
 
-const [NAV, ALIGN] = ['navigation', 'grid-align'];
-const defaultItemWidth = 106;
-const defaultGridGap = 32;
-
+const defaultItemWidth = (cols) => (cols === 3 ? 160 : 147);
 const PREVBUTTON = `<button class="nav-button previous-button"><img class="previous-icon" alt="Previous icon" src="${base}/blocks/carousel/img/arrow.svg"></button>`;
 const NEXTBUTTON = `<button class="nav-button next-button"><img class="next-icon" alt="Next icon" src="${base}/blocks/carousel/img/arrow.svg"></button>`;
 
@@ -24,44 +21,36 @@ const getBlockProps = (el) => [...el.childNodes].reduce((attr, row) => {
 
 function setBlockProps(el, columns) {
   const attrs = getBlockProps(el);
-  const itemWidth = attrs['item width'] ?? defaultItemWidth;
+  const itemWidth = attrs['item width'] ?? defaultItemWidth(columns);
   const overrides = attrs.style
     ? attrs.style
       .split(', ')
       .map((style) => style.replaceAll(' ', '-'))
       .join(' ')
     : '';
-  const gridAlign = [...el.classList].filter((cls) => cls.toLowerCase().includes(ALIGN))
-    ?? 'grid-align-start';
   el.style.setProperty('--action-scroller-columns', columns);
   el.style.setProperty('--action-scroller-item-width', itemWidth);
-  return `scroller ${gridAlign} ${overrides}`;
+  return `scroller ${columns <= 5 ? 'justify-center' : ''} ${overrides}`;
 }
 
 function handleScroll(el, btn) {
-  const itemWidth = el.parentElement?.style?.getPropertyValue('--action-scroller-item-width')
-    ?? defaultItemWidth;
+  const itemWidth = el.parentElement?.style?.getPropertyValue('--action-scroller-item-width');
   const gapStyle = window
     .getComputedStyle(el, null)
     .getPropertyValue('column-gap');
-  const gridGap = gapStyle
-    ? parseInt(gapStyle.replace('px', ''), 10)
-    : defaultGridGap;
-  const scrollDistance = parseInt(itemWidth, 10) + gridGap;
+  const scrollDistance = parseInt(itemWidth, 10) + parseInt(gapStyle.replace('px', ''), 10);
   el.scrollLeft = btn[1].includes('next-button')
     ? el.scrollLeft + scrollDistance
     : el.scrollLeft - scrollDistance;
 }
 
-function handleBtnState(
-  { scrollLeft, scrollWidth, clientWidth },
-  [prev, next],
-) {
-  prev.setAttribute('hide-btn', scrollLeft === 0);
-  next.setAttribute(
-    'hide-btn',
-    Math.ceil(scrollLeft) === Math.ceil(scrollWidth - clientWidth),
-  );
+function handleBtnState(el, [prev, next]) {
+  const { scrollLeft, scrollWidth, clientWidth } = el;
+  const hidePrev = scrollLeft === 0;
+  const hideNext = Math.ceil(scrollLeft) === Math.ceil(scrollWidth - clientWidth);
+  prev.setAttribute('hide-btn', hidePrev);
+  next.setAttribute('hide-btn', hideNext);
+  el.setAttribute('hide-mask', hidePrev && hideNext);
 }
 
 function handleNavigation(el) {
@@ -76,7 +65,7 @@ function handleNavigation(el) {
 }
 
 export default function init(el) {
-  const hasNav = el.classList.contains(NAV);
+  const hasNav = el.classList.contains('navigation');
   const actions = el.parentElement.querySelectorAll('.action-item');
   const style = setBlockProps(el, actions.length);
   const items = createTag('div', { class: style }, null);
diff --git a/libs/blocks/icon-block/icon-block.css b/libs/blocks/icon-block/icon-block.css
index 22d9eae5ef..008239b343 100644
--- a/libs/blocks/icon-block/icon-block.css
+++ b/libs/blocks/icon-block/icon-block.css
@@ -231,10 +231,6 @@
   max-width: var(--icon-size-l);
 }
 
-.section.five-up  {
-  grid-template-columns: repeat(auto-fit, minmax(276px, 1fr)) !important;
-}
-
 .icon-block .foreground .text-content > * {
   width: 100%;
 }
@@ -487,8 +483,4 @@
   .three-up .icon-block.bio .foreground {
     max-width: 300px;
   }
-
-  .section.five-up {
-    grid-template-columns: repeat(5, 1fr) !important;
-  }
 }
diff --git a/libs/blocks/section-metadata/section-metadata.css b/libs/blocks/section-metadata/section-metadata.css
index 6163bcbacd..6fab96a0f9 100644
--- a/libs/blocks/section-metadata/section-metadata.css
+++ b/libs/blocks/section-metadata/section-metadata.css
@@ -169,10 +169,7 @@
   gap: var(--spacing-xxxl);
 }
 
-.section.two-up,
-.section.three-up,
-.section.four-up,
-.section.five-up {
+.section[class*='-up']:not(.masonry-up) {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(276px, 1fr));
   gap: var(--spacing-m);
@@ -182,7 +179,7 @@
 }
 
 .section.five-up {
-  grid-template-columns: repeat(auto-fit, minmax(142px, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(125px, 1fr));
 }
 
 .section.sticky-top {
@@ -215,6 +212,11 @@
   gap: var(--spacing-m);
 }
 
+.section.sticky-bottom.promo-sticky-section {
+  background: none;
+  z-index: 4;
+}
+
 .section[class*='grid-width-'] > .content,
 main > .section[class*='-up'] > .content {
   max-width: initial;
@@ -313,6 +315,12 @@ main > .section[class*='-up'] > .content {
     grid-template-columns: repeat(5, 1fr);
   }
 
+  .section.center[class*='-up'] {
+    grid-template-columns: auto;
+    grid-auto-flow: column;
+    justify-content: center;
+  }
+
   .section.grid-template-columns-1-2 {
     grid-template-columns: 1fr 2fr;
   }
@@ -328,12 +336,12 @@ main > .section[class*='-up'] > .content {
   .section.grid-template-columns-3-1 {
     grid-template-columns: 3fr 1fr;
   }
-  
+
   .section.grid-width-6-desktop {
     padding-left: var(--grid-margins-width-6);
     padding-right: var(--grid-margins-width-6);
   }
-  
+
   .section.grid-width-8-desktop {
     padding-left: var(--grid-margins-width-8);
     padding-right: var(--grid-margins-width-8);
diff --git a/test/blocks/action-scroller/action-scroller.test.js b/test/blocks/action-scroller/action-scroller.test.js
index ad98c36b8e..d2b50448f3 100644
--- a/test/blocks/action-scroller/action-scroller.test.js
+++ b/test/blocks/action-scroller/action-scroller.test.js
@@ -51,6 +51,7 @@ describe('action scrollers', () => {
           const scrolled = scrollArea.scrollLeft > 0;
           expect(scrolled).to.be.true;
         });
+
         it('can scroll previous', async () => {
           const scrollArea = scroller.querySelector('.scroller');
           const prevBtn = scroller.querySelector('.previous-button');
diff --git a/test/blocks/action-scroller/mocks/body.html b/test/blocks/action-scroller/mocks/body.html
index de2fd499a1..3938cd1746 100644
--- a/test/blocks/action-scroller/mocks/body.html
+++ b/test/blocks/action-scroller/mocks/body.html
@@ -93,14 +93,14 @@
     </div>
   </div>
   <div>
-    <div class="action-scroller navigation grid-align-end">
+    <div class="action-scroller navigation">
       <div>
         <div>Item width</div>
         <div>110</div>
       </div>
       <div>
         <div>style</div>
-        <div>Grid align end</div>
+        <div>dark</div>
       </div>
     </div>
     <div class="action-item">
@@ -194,4 +194,37 @@
       </div>
     </div>
   </div>
+  <div>
+    <div class="action-scroller"></div>
+    <div class="action-item">
+      <div>
+        <picture>
+          <img loading="lazy" alt="" src="" width="178" height="180">
+        </picture>
+      </div>
+      <div>
+        <div><a href="https://www.adobe.com/">https://www.adobe.com/</a></div>
+      </div>
+    </div>
+    <div class="action-item">
+      <div>
+        <picture>
+          <img loading="lazy" alt="" src="" width="178" height="180">
+        </picture>
+      </div>
+      <div>
+        <div><a href="https://www.adobe.com/">https://www.adobe.com/</a></div>
+      </div>
+    </div>
+    <div class="action-item">
+      <div>
+        <picture>
+          <img loading="lazy" alt="" src="" width="178" height="180">
+        </picture>
+      </div>
+      <div>
+        <div><a href="https://www.adobe.com/">https://www.adobe.com/</a></div>
+      </div>
+    </div>
+  </div>
 </div>