Merge branch 'main' into ost-block-docu

adobecom · Jan 8, 2024 · afcbde9 · afcbde9
2 parents 7296473 + 66f6042
commit afcbde9
Show file tree

Hide file tree

Showing 15 changed files with 211 additions and 85 deletions.
diff --git a/.github/PULL_REQUEST_TEMPLATE/gnav.md b/.github/PULL_REQUEST_TEMPLATE/gnav.md
@@ -27,11 +27,10 @@ Resolves: [MWPW-111111](https://jira.corp.adobe.com/browse/MWPW-111111)
 - Before: https://main--homepage--adobecom.hlx.page/homepage/index-loggedout?martech=off
 - After: https://main--homepage--adobecom.hlx.page/homepage/index-loggedout?martech=off&milolibs=<branch>--milo--<owner>
 
-**Milo:**
-- Before: https://main--milo--adobecom.hlx.page/ch_de/drafts/ramuntea/gnav-refactor?martech=off
-- After: https://<branch>--milo--<owner>.hlx.page/ch_de/drafts/ramuntea/gnav-refactor?martech=off
-
 **Blog:**
 - Before: https://main--blog--adobecom.hlx.page/
 - After: https://main--blog--adobecom.hlx.page/?milolibs=<branch>--milo--<owner>
 
+**Milo:**
+- Before: https://main--milo--adobecom.hlx.page/ch_de/drafts/ramuntea/gnav-refactor?martech=off
+- After: https://<branch>--milo--<owner>.hlx.page/ch_de/drafts/ramuntea/gnav-refactor?martech=off
diff --git a/libs/blocks/global-navigation/utilities/menu/menu.js b/libs/blocks/global-navigation/utilities/menu/menu.js
@@ -135,12 +135,9 @@ const decoratePromo = (elem, index) => {
   const imageElem = elem.querySelector('picture');
 
   if (!isImageOnly) {
-    const cachedImageElem = imageElem && elem.removeChild(imageElem.closest(`${selectors.gnavPromo} > div`));
-    const innerContainer = toFragment`<div class="feds-promo-content"></div>`;
-
-    innerContainer.append(...elem.children);
-    elem.appendChild(innerContainer);
-    if (cachedImageElem) elem.appendChild(cachedImageElem);
+    const content = [...elem.querySelectorAll(':scope > div')]
+      .find((section) => !(section.querySelector('picture') instanceof HTMLElement));
+    content?.classList.add('feds-promo-content');
   }
 
   decorateElements({ elem, className: 'feds-promo-link', index });

diff --git a/libs/blocks/marquee/marquee.css b/libs/blocks/marquee/marquee.css
@@ -8,7 +8,7 @@
   min-height: 560px;
 }
 
-.marquee:is(.small, .inline, .large.compact) {
+.marquee.small, .marquee.quiet, .marquee.inline, .marquee.large.compact {
   min-height: 360px;
 }
 
@@ -17,28 +17,30 @@
   margin-bottom: 0;
 }
 
-.marquee:is(.light, .mobile-light, .quiet, .inline) {
+.marquee.light, .marquee.mobile-light, .marquee.quiet, .marquee.inline {
   color: var(--text-color);
 }
 
-.marquee:is(.mobile-dark, .quiet.dark) {
+.marquee.mobile-dark {
   color: var(--color-white);
 }
 
-.marquee .icon-area :is(picture, a) {
+.marquee .icon-area picture,
+.marquee .icon-area a {
   display: contents;
 }
 
-.marquee:is(.mobile-dark, .quiet.dark) a:is(:not(.con-button), :not(.con-button):hover) {
-  color: var(--link-color-dark);
-}
-
 .marquee.mobile-light a:not(.con-button) {
   color: var(--link-color);
 }
 
-.marquee.static-links a:not(.con-button),
-.static-links .marquee a:not(.con-button),
+.marquee.mobile-dark a:not(.con-button),
+.marquee.mobile-dark a:not(.con-button):hover {
+  color: var(--link-color-dark);
+}
+
+.marquee.static-links:not(.mobile-dark) a:not(.con-button),
+.static-links .marquee:not(.mobile-dark) a:not(.con-button),
 .marquee.static-links a:not(.con-button):hover,
 .static-links .marquee a:not(.con-button):hover {
   color: inherit;
@@ -93,7 +95,8 @@
   margin: 0 auto;
 }
 
-.marquee .media :is(img, video) {
+.marquee .media img,
+.marquee .media video {
   display: block;
   width: 100%;
   height: auto;
@@ -125,11 +128,8 @@
   left: 0;
 }
 
-.marquee:is(.center, .centered) :is(.foreground, .action-area) {
-  justify-content: center;
-}
-
-.marquee .background :is(.tablet-only, .desktop-only) {
+.marquee .background .tablet-only,
+.marquee .background .desktop-only {
   display: none;
 }
 
@@ -173,6 +173,10 @@
   display: block;
 }
 
+.marquee:is(.center, .centered) .icon-area img {
+  margin: 0 auto;
+}
+
 .marquee.large .icon-area img {
   height: 64px;
 }
@@ -204,14 +208,24 @@
   padding: 0;
 }
 
-.marquee .text :is(.detail-l, .heading-xl, .heading-xxl) {
+.marquee .text .detail-l,
+.marquee .text .heading-xl,
+.marquee .text .heading-xxl {
   margin-bottom: var(--spacing-xs);
 }
 
-.marquee:is(.center, .centered) {
+.marquee.center,
+.marquee.centered {
   text-align: center;
 }
 
+.marquee.center .foreground,
+.marquee.center .action-area,
+.marquee.centered .foreground,
+.marquee.centered .action-area {
+  justify-content: center;
+}
+
 /* Split */
 .marquee.split {
   flex-direction: column;
@@ -223,14 +237,16 @@
   margin: 0;
 }
 
-.marquee.split .media :is(img, video) {
+.marquee.split .media img,
+.marquee.split .media video {
   width: 100%;
   height: 100%;
   object-fit: cover;
   max-height: 360px;
 }
 
-.marquee:is(.split, .small.split) .foreground {
+.marquee.split .foreground,
+.marquee.small.split .foreground {
   padding: var(--spacing-m) 0;
 }
 
@@ -318,11 +334,8 @@
     gap: var(--spacing-s);
   }
 
-  .marquee:is(.split, .split.small, .split.large) .media :is(img, video) {
-    max-height: initial;
-  }
-
-  .marquee .background :is(.mobile-only, .desktop-only) {
+  .marquee .background .mobile-only,
+  .marquee .background .desktop-only {
     display: none;
   }
 
@@ -345,12 +358,30 @@
   .marquee.tablet-dark {
     color: var(--color-white);
   }
+
+  .marquee.split.large .text {
+    margin: 0;
+  }
+
+  .marquee.quiet .foreground .text {
+    max-width: 600px;
+  }
+
+  .marquee.center .foreground .text,
+  .marquee.centered .foreground .text {
+    margin: 0 auto;
+  }
+
+  .marquee.quiet.large .foreground .text {
+    max-width: 800px;
+  }
 
   .marquee.tablet-light a:not(.con-button) {
     color: var(--link-color);
   }
 
-  .marquee.tablet-dark a:is(:not(.con-button), :not(.con-button):hover) {
+  .marquee.tablet-dark a:not(.con-button),
+  .marquee.tablet-dark a:not(.con-button):hover {
     color: var(--link-color-dark);
   }
 
@@ -381,7 +412,7 @@
     text-decoration: none;
   }
 
-.marquee .media {
+  .marquee .media {
     width: var(--grid-container-width); /* 10 grid / 83% */
   }
 
@@ -396,22 +427,6 @@
     flex-direction: row;
     padding: var(--spacing-xl) 0;
   }
-
-  .marquee:is(.center, .centered) .foreground .text {
-    margin: 0 auto;
-  }
-
-  .marquee.split.large .text {
-    margin: 0;
-  }
-
-  .marquee.quiet .foreground .text {
-    max-width: 600px;
-  }
-
-  .marquee.quiet.large .foreground .text {
-    max-width: 800px;
-  }
 
   .marquee.split .foreground.container .text {
     max-width: calc(50% - var(--grid-column-width));
@@ -452,8 +467,18 @@
   .marquee.split.row-reversed .foreground.container {
     justify-content: flex-end;
   }
+
+  .marquee.split .media img,
+  .marquee.split.small .media img,
+  .marquee.split.large .media img,
+  .marquee.split .media video,
+  .marquee.split.small .media video,
+  .marquee.split.large .media video{
+    max-height: initial;
+  }
 
-  .marquee.split .media.bleed :is(picture, video) {
+  .marquee.split .media.bleed picture,
+  .marquee.split .media.bleed video {
     height: 100%;
     object-fit: fill;
   }
@@ -478,13 +503,8 @@
     min-height: 360px;
   }
 
-  .marquee .media :is(img, video) {
-    width: 100%;
-    max-width: initial;
-    min-height: 150px;
-  }
-
-  .marquee .background :is(.mobile-only, .tablet-only) {
+  .marquee .background .mobile-only,
+  .marquee .background .tablet-only {
     display: none;
   }
 
@@ -507,8 +527,9 @@
   .marquee.desktop-light a:not(.con-button) {
     color: var(--link-color);
   }
-
-  .marquee.desktop-dark a:is(:not(.con-button), :not(.con-button):hover) {
+
+  .marquee.desktop-dark a:not(.con-button),
+  .marquee.desktop-dark a:not(.con-button):hover {
     color: var(--link-color-dark);
   }
 
@@ -550,11 +571,30 @@
     gap: 100px; /* 1 column */
   }
 
-  :is(.marquee, .marquee.small, .marquee.large) .text {
+  .marquee.small .foreground,
+  .marquee.split .foreground.container {
+    padding: 0;
+  }
+
+  .marquee.quiet .foreground,
+  .marquee.inline .foreground,
+  .marquee.split .foreground {
+    justify-content: initial;
+  }
+
+  html[dir="rtl"] .marquee .foreground {
+    flex-direction: row-reverse;
+  }
+
+  .marquee .text,
+  .marquee.small .text,
+  .marquee.large .text {
     order: unset;
   }
 
-  :is(.marquee, .marquee.small, .marquee.large) .media {
+  .marquee .media,
+  .marquee.small .media,
+  .marquee.large .media {
     order: unset;
   }
 
@@ -566,17 +606,18 @@
     max-width: 600px;
   }
 
-  .marquee.small .foreground,
-  .marquee.split .foreground.container {
-    padding: 0;
-  }
-
-  .marquee:is(.quiet, .inline, .split) .foreground {
-    justify-content: initial;
+  .marquee.quiet.center .foreground,
+  .marquee.inline.center .foreground,
+  .marquee.quiet.centered .foreground,
+  .marquee.inline.centered .foreground {
+    justify-content: center;
   }
 
-  .marquee:is(.quiet, .inline):is(.center, .centered) .foreground {
-    justify-content: center;
+  .marquee .media img,
+  .marquee .media video {
+    width: 100%;
+    max-width: initial;
+    min-height: 150px;
   }
 
   .marquee.small .text {
@@ -653,7 +694,8 @@
     right: auto;
   }
 
-  .marquee.split:is(.one-third, .one-third.large) .foreground.container .text {
+  .marquee.split.one-third .foreground.container .text,
+  .marquee.split.one-third.large .foreground.container .text {
     max-width: calc(33.3334% - var(--grid-column-width));
   }
 

diff --git a/libs/blocks/marquee/marquee.js b/libs/blocks/marquee/marquee.js
@@ -65,7 +65,8 @@ const decorateImage = (media) => {
 };
 
 export default function init(el) {
-  if (!['light', 'quiet'].some((s) => el.classList.contains(s))) el.classList.add('dark');
+  const isLight = el.classList.contains('light');
+  if (!isLight) el.classList.add('dark');
   const children = el.querySelectorAll(':scope > div');
   const foreground = children[children.length - 1];
   if (children.length > 1) {

diff --git a/libs/blocks/media/media.css b/libs/blocks/media/media.css
@@ -170,6 +170,7 @@ div[class*="-up"] .media .foreground > .media-row {
   padding-bottom: 0;
   padding-top: 0;
   display: inline-flex;
+  margin-top: var(--spacing-xxs);
 }
 
 .media.qr-code .google-play {
@@ -341,8 +342,9 @@ div[class*="-up"] .media .foreground > .media-row {
 
   .media.qr-code img.qr-code-img {
     display: flex;
-    width: 150px;
-    height: 170px;
+    width: 140px;
+    height: 140px;
+    margin-top: var(--spacing-s);
   }
 
   .media.qr-code .qr-button-container {

diff --git a/libs/blocks/media/media.js b/libs/blocks/media/media.js
@@ -72,7 +72,7 @@ export default function init(el) {
 
     // qr code
     if (row.closest('.qr-code')) {
-      const imgQRCode = row.querySelector('.text > p.body-s > picture > img');
+      const imgQRCode = row.querySelector('.text img');
       if (imgQRCode) {
         imgQRCode.classList.add('qr-code-img');
       }