MWPW-137282 - Action item block layout options (#1501)

* actions scroller center & section grid center * update scroller test to cover all code branches * update test mock to avoid nav test * put back sticky and center styles * [Release] Stage to Main (#2208) * Update code owners for feds (#2194) Co-authored-by: Blaine Gunn <Blainegunn@gmail.com> Co-authored-by: Robert Bogos <146744221+robert-bogos@users.noreply.github.com> * Harden preflight link checking (#2169) * Filter out empty `hrefs` before sending to spidy. * Harden link check to be more robust against Spidy API. * Update link check language. * Better onboarding support. * Adds fallbacks if `.milo/config` has not been added. * Fix for missing Word doc reference, under general tab. Resolves: [MWPW-146695](https://jira.corp.adobe.com/browse/MWPW-146695) Co-authored-by: Ryan Clayton <rclayton@adobe.com> * MWPW-146755: RTL merch icon padding (#2162) * RTL padding merch icon * dep update * MWPW-146001 parallelize literals call (#2187) * MWPW-146001 parallelize literals call * MWPW-146001 move promise to the function * MWPW-146001 fix commerce library * MWPW-146001 update literals endpoint * MWPW-146001 fixing commerce ut --------- Co-authored-by: Narcis Radu <github@narcisradu.ro> Co-authored-by: Blaine Gunn <Blainegunn@gmail.com> Co-authored-by: Robert Bogos <146744221+robert-bogos@users.noreply.github.com> Co-authored-by: Ryan Clayton <rgclayton@gmail.com> Co-authored-by: Ryan Clayton <rclayton@adobe.com> Co-authored-by: Axel Cureno Basurto <axelcureno@gmail.com> Co-authored-by: Nicolas Peltier <1032754+npeltier@users.noreply.github.com> --------- Co-authored-by: Ruchika Sinha <69535463+Ruchika4@users.noreply.github.com> Co-authored-by: Narcis Radu <github@narcisradu.ro> Co-authored-by: Blaine Gunn <Blainegunn@gmail.com> Co-authored-by: Robert Bogos <146744221+robert-bogos@users.noreply.github.com> Co-authored-by: Ryan Clayton <rgclayton@gmail.com> Co-authored-by: Ryan Clayton <rclayton@adobe.com> Co-authored-by: Axel Cureno Basurto <axelcureno@gmail.com> Co-authored-by: Nicolas Peltier <1032754+npeltier@users.noreply.github.com>
adobecom · Apr 29, 2024 · b7e8900 · b7e8900
1 parent dac9c7e
commit b7e8900
Show file tree

Hide file tree

Showing 7 changed files with 78 additions and 45 deletions.
diff --git 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
@@ -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
@@ -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
@@ -225,10 +225,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%;
 }
@@ -449,8 +445,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
@@ -169,10 +169,7 @@
   gap: var(--spacing-xxxl);
 }
 
-.section.two-up,
-.section.three-up,
-.section.four-up,
-.section.five-up {
+.section[class*='-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
@@ -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
@@ -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>