Revert "MWPW-137282 - [Action Items] Centered in the grid/scroller" (#…

…2286) Revert "MWPW-137282 - [Action Items] Centered in the grid/scroller (#2237)" This reverts commit a9a453c.
adobecom · May 10, 2024 · 584f6da · 584f6da
1 parent a9a453c
commit 584f6da
Show file tree

Hide file tree

Showing 7 changed files with 45 additions and 78 deletions.
diff --git a/libs/blocks/action-item/action-item.css b/libs/blocks/action-item/action-item.css
@@ -1,6 +1,5 @@
 .action-item {
   display: flex;
-  width: 160px;
 }
 
 .action-item img {
@@ -90,10 +89,6 @@
   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
@@ -12,18 +12,16 @@
 
 .action-scroller .scroller {
   display: grid;
-  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-template-columns: repeat(var(--action-scroller-columns), 1fr);
+  grid-auto-columns: minmax(var(--action-scroller-column-width), 1fr);
   grid-auto-flow: column;
-  gap: var(--spacing-xs);
+  gap: var(--spacing-m);
   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,
@@ -47,6 +45,7 @@
   mask-repeat: no-repeat, no-repeat;
 }
 
+
 .action-scroller .scroller::-webkit-scrollbar {
   display: none;
 }
@@ -140,8 +139,4 @@
     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
@@ -3,7 +3,10 @@ import { createTag, getConfig } from '../../utils/utils.js';
 const { miloLibs, codeRoot } = getConfig();
 const base = miloLibs || codeRoot;
 
-const defaultItemWidth = (cols) => (cols === 3 ? 160 : 147);
+const [NAV, ALIGN] = ['navigation', 'grid-align'];
+const defaultItemWidth = 106;
+const defaultGridGap = 32;
+
 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>`;
 
@@ -21,36 +24,44 @@ const getBlockProps = (el) => [...el.childNodes].reduce((attr, row) => {
 
 function setBlockProps(el, columns) {
   const attrs = getBlockProps(el);
-  const itemWidth = attrs['item width'] ?? defaultItemWidth(columns);
+  const itemWidth = attrs['item width'] ?? defaultItemWidth;
   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 ${columns <= 5 ? 'justify-center' : ''} ${overrides}`;
+  return `scroller ${gridAlign} ${overrides}`;
 }
 
 function handleScroll(el, btn) {
-  const itemWidth = el.parentElement?.style?.getPropertyValue('--action-scroller-item-width');
+  const itemWidth = el.parentElement?.style?.getPropertyValue('--action-scroller-item-width')
+    ?? defaultItemWidth;
   const gapStyle = window
     .getComputedStyle(el, null)
     .getPropertyValue('column-gap');
-  const scrollDistance = parseInt(itemWidth, 10) + parseInt(gapStyle.replace('px', ''), 10);
+  const gridGap = gapStyle
+    ? parseInt(gapStyle.replace('px', ''), 10)
+    : defaultGridGap;
+  const scrollDistance = parseInt(itemWidth, 10) + gridGap;
   el.scrollLeft = btn[1].includes('next-button')
     ? el.scrollLeft + scrollDistance
     : el.scrollLeft - scrollDistance;
 }
 
-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 handleBtnState(
+  { scrollLeft, scrollWidth, clientWidth },
+  [prev, next],
+) {
+  prev.setAttribute('hide-btn', scrollLeft === 0);
+  next.setAttribute(
+    'hide-btn',
+    Math.ceil(scrollLeft) === Math.ceil(scrollWidth - clientWidth),
+  );
 }
 
 function handleNavigation(el) {
@@ -65,7 +76,7 @@ function handleNavigation(el) {
 }
 
 export default function init(el) {
-  const hasNav = el.classList.contains('navigation');
+  const hasNav = el.classList.contains(NAV);
   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
@@ -231,6 +231,10 @@
   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%;
 }
@@ -483,4 +487,8 @@
   .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
@@ -169,7 +169,10 @@
   gap: var(--spacing-xxxl);
 }
 
-.section[class*='-up']:not(.masonry-up) {
+.section.two-up,
+.section.three-up,
+.section.four-up,
+.section.five-up {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(276px, 1fr));
   gap: var(--spacing-m);
@@ -179,7 +182,7 @@
 }
 
 .section.five-up {
-  grid-template-columns: repeat(auto-fit, minmax(125px, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(142px, 1fr));
 }
 
 .section.sticky-top {
@@ -212,11 +215,6 @@
   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;
@@ -315,12 +313,6 @@ 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;
   }
@@ -336,12 +328,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
@@ -51,7 +51,6 @@ 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
@@ -93,14 +93,14 @@
     </div>
   </div>
   <div>
-    <div class="action-scroller navigation">
+    <div class="action-scroller navigation grid-align-end">
       <div>
         <div>Item width</div>
         <div>110</div>
       </div>
       <div>
         <div>style</div>
-        <div>dark</div>
+        <div>Grid align end</div>
       </div>
     </div>
     <div class="action-item">
@@ -194,37 +194,4 @@
       </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>