MWPW-143783 - [Marquee] block enhancement - Support for logo | label …

…'lockup' (#2192) * icon label lock up alignent * Set defaults sizes for .inline icon-area elements * update from main * refined icon-area sizing based on spec from design * adjusted lockup large label size and added label:hover styles if authored. * fixed test and eslint * no text decoration on icon-area a:hover * fixed tests * updated default icon size --------- Co-authored-by: Okan Sahin <39759830+mokimo@users.noreply.github.com>
adobecom · May 8, 2024 · 5533f4d · 5533f4d
1 parent 6299854
commit 5533f4d
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 23 deletions.
diff --git a/libs/blocks/marquee/marquee.css b/libs/blocks/marquee/marquee.css
@@ -33,7 +33,16 @@
 
 .marquee .icon-area picture,
 .marquee .icon-area a {
-  display: contents;
+  display: inline-flex;
+}
+
+.marquee .icon-area a {
+  color: inherit;
+  text-decoration: none;
+}
+
+.marquee .icon-area a:hover {
+  text-decoration: none;
 }
 
 .marquee.mobile-light a:not(.con-button) {
@@ -102,11 +111,15 @@
 }
 
 .marquee .icon-area {
-  margin-bottom: var(--spacing-s);
+  display: flex;
+  gap: var(--spacing-xs);
+  align-items: center;
+  font-size: var(--type-body-m-size);
+  font-weight: 700;
 }
 
 .marquee .icon-area img {
-  height: 48px;
+  height: var(--icon-size-l);
   width: auto;
   display: block;
 }
@@ -184,8 +197,12 @@
   margin: 0 auto;
 }
 
+.marquee.large .icon-area {
+  font-size: var(--type-body-xl-size);
+}
+
 .marquee.large .icon-area img {
-  height: 64px;
+  height: var(--icon-size-xl);
 }
 
 .marquee.large .foreground {
@@ -228,7 +245,9 @@
 .marquee.center .foreground,
 .marquee.center .action-area,
 .marquee.centered .foreground,
-.marquee.centered .action-area {
+.marquee.centered .action-area,
+.marquee.center .icon-area,
+.marquee.centered .icon-area {
   justify-content: center;
 }
 
@@ -283,26 +302,24 @@
 
 .marquee.split .icon-area img {
   height: auto;
-  max-height: 56px;
+  max-height: var(--icon-size-l);
   max-width: 275px;
   object-fit: contain;
   object-position: left bottom;
 }
 
-.marquee .icon-area.icon-area-multiple {
-  display: flex;
+.marquee.small .icon-area,
+.marquee .icon-area[icon-count] {
+  font-size: var(--type-body-s-size);
 }
 
-.marquee .icon-area.icon-area-multiple img {
-  height: 40px;
-  max-height: 40px;
+.marquee.small .icon-area img,
+.marquee .icon-area[icon-count] img {
+  height: var(--icon-size-m);
+  max-height: var(--icon-size-m);
   max-width: 114px;
 }
 
-.marquee .icon-area.icon-area-multiple > :not(:first-child) img {
-  margin-left: var(--spacing-xxs);
-}
-
 .marquee.large .text .action-area {
   order: 2;
   margin-bottom: var(--spacing-s);
@@ -737,6 +754,7 @@
   }
 }
 
+/* stylelint-disable no-descending-specificity */
 .marquee.static-links a:not(.con-button),
 .marquee.static-links a:not(.con-button):hover,
 .static-links .marquee a:not(.con-button),

diff --git a/libs/blocks/marquee/marquee.js b/libs/blocks/marquee/marquee.js
@@ -33,17 +33,19 @@ function decorateText(el, size) {
 }
 
 function decorateMultipleIconArea(iconArea) {
-  iconArea.querySelectorAll(':scope > picture').forEach((picture) => {
+  let count = 0;
+  iconArea.querySelectorAll(':scope picture').forEach((picture) => {
+    count += 1;
     const src = picture.querySelector('img')?.getAttribute('src');
     const a = picture.nextElementSibling;
+    if (count > 1) iconArea.setAttribute('icon-count', count);
     if (src?.endsWith('.svg') || a?.tagName !== 'A') return;
     if (!a.querySelector('img')) {
       a.innerHTML = '';
       a.className = '';
       a.appendChild(picture);
     }
   });
-  if (iconArea.childElementCount > 1) iconArea.classList.add('icon-area-multiple');
 }
 
 function extendButtonsClass(text) {

diff --git a/test/blocks/marquee/marquee.test.js b/test/blocks/marquee/marquee.test.js
@@ -14,6 +14,7 @@ const { default: init } = await import('../../../libs/blocks/marquee/marquee.js'
 const { default: videoBLock } = await import('../../../libs/blocks/video/video.js');
 const video = await readFile({ path: './mocks/video.html' });
 const multipleIcons = await readFile({ path: './mocks/multiple-icons.html' });
+
 describe('marquee', () => {
   const marquees = document.querySelectorAll('.marquee');
   marquees.forEach((marquee) => {
@@ -98,13 +99,13 @@ describe('marquee', () => {
     it('using img', () => {
       const marquee = document.getElementById('using-images');
       init(marquee);
-      expect(marquee.querySelector('.icon-area-multiple')).to.exist;
+      expect(marquee.querySelector('[icon-count]')).to.exist;
     });
 
     it('using svg', () => {
       const marquee = document.getElementById('using-svgs');
       init(marquee);
-      expect(marquee.querySelector('.icon-area-multiple')).to.exist;
+      expect(marquee.querySelector('[icon-count]')).to.exist;
     });
   });
 

diff --git a/test/blocks/marquee/mocks/multiple-icons.html b/test/blocks/marquee/mocks/multiple-icons.html
@@ -54,10 +54,18 @@ <h2>Using svgs</h2>
   <div>
     <div>
       <p>
-        <a href="https://www.adobe.com/products/substance3d-modeler.html">https://www.adobe.com/content/dam/cc/icons/md_appicon_256.svg | 3D Modeler</a>
-        <a href="https://www.adobe.com/products/substance3d/3d-assets.html">https://substance3d.adobe.com/magazine/wp-content/uploads/2021/06/sb_assets_appicon_256.svg | 3D Assets</a>
-        <a href="https://www.adobe.com/products/substance3d-modeler.html">https://www.adobe.com/content/dam/cc/icons/md_appicon_256.svg | 3D Modeler</a>
-        <a href="https://www.adobe.com/products/substance3d/3d-assets.html">https://substance3d.adobe.com/magazine/wp-content/uploads/2021/06/sb_assets_appicon_256.svg | 3D Assets</a>
+        <a href="https://www.adobe.com/products/substance3d-modeler.html">
+          <picture><img loading="lazy" src="https://www.adobe.com/content/dam/cc/icons/md_appicon_256.svg" alt="3D Modeler"></picture>
+        </a>
+        <a href="https://www.adobe.com/products/substance3d-modeler.html">
+          <picture><img loading="lazy" src="https://substance3d.adobe.com/magazine/wp-content/uploads/2021/06/sb_assets_appicon_256.svg" alt="3D Assets"></picture>
+        </a>
+        <a href="https://www.adobe.com/products/substance3d-modeler.html">
+          <picture><img loading="lazy" src="https://www.adobe.com/content/dam/cc/icons/md_appicon_256.svg" alt="3D Modeler"></picture>
+        </a>
+        <a href="https://www.adobe.com/products/substance3d-modeler.html">
+          <picture><img loading="lazy" src="https://substance3d.adobe.com/magazine/wp-content/uploads/2021/06/sb_assets_appicon_256.svg" alt="3D Assets"></picture>
+        </a>
       </p>
       <p>Detail (optional)</p>
       <h1 id="heading-lorem-ipsum-dolor-sit-amet-consect">Heading Lorem ipsum dolor sit amet consect.</h1>