[Release] Stage to Main

libs/blocks/editorial-card/editorial-card.css

@@ -67,6 +67,7 @@
 .editorial-card .foreground picture {
   line-height: 0;
   display: block;
+  height: 100%;
 }
 
 .editorial-card .media-area img,
@@ -78,6 +79,16 @@
   max-height: var(--card-height-default);
 }
 
+.editorial-card.no-foreground,
+.editorial-card.no-foreground .media-area {
+  height: 100%;
+}
+
+.editorial-card.no-foreground .media-area img,
+.editorial-card.no-foreground .media-area video {
+  max-height: unset;
+}
+
 .editorial-card .media-area .modal-img-link {
   display: block;
 }
@@ -138,6 +149,14 @@
   line-height: 0;
 }
 
+.editorial-card.no-foreground { 
+  border: none;
+}
+
+.editorial-card.no-foreground .media-area > div {
+  height: 100%;
+}
+
 .editorial-card.footer-align-left .card-footer > div { text-align: start; }
 .editorial-card.footer-align-center .card-footer > div { text-align: center; }
 

libs/blocks/editorial-card/editorial-card.js

@@ -42,7 +42,15 @@ const decorateMedia = (el, media) => {
 };
 
 const decorateForeground = async (el, rows) => {
+  let isForegroundEmpty = true;
+
   rows.forEach((row, i) => {
+    if (!row.textContent.trim()) {
+      row.remove();
+      return;
+    }
+
+    isForegroundEmpty = false;
     if (i === 0) {
       row.classList.add('foreground');
       decorateLockupFromContent(row);
@@ -55,6 +63,8 @@ const decorateForeground = async (el, rows) => {
     decorateBlockText(row, ['m', 'm', 'm']); // heading, body, detail
     decorateBlockHrs(row);
   });
+
+  if (isForegroundEmpty) el.classList.add('no-foreground');
 };
 
 const decorateBgRow = (el, background, remove = false) => {

libs/blocks/marquee-anchors/marquee-anchors.js

@@ -54,11 +54,11 @@ export default function init(el) {
   decorateBlockText(copy, blockTypeSizes.default[size]);
   const links = createTag('div', { class: 'links' }, list);
   const foreground = createTag('div', { class: 'foreground' }, copy);
-  decorateBlockText(links, blockTypeSizes.default.xsmall);
   foreground.append(links);
   el.append(foreground);
 
-  [...list].forEach((i) => {
+  [...list].forEach((i, index) => {
+    decorateBlockText(i, blockTypeSizes.default.xsmall);
     const aTag = i.querySelector('a');
     if (aTag?.textContent.charAt(0) === '#') {
       const content = i.querySelector(':scope > div');
@@ -73,12 +73,10 @@ export default function init(el) {
       } else {
         aTag.classList.add('external');
       }
+    } else {
+      i.classList.add(`links-${index === 0 ? 'header' : 'footer'}`);
     }
   });
-  const emptyLinkRows = links.querySelectorAll(':scope > div:not([class])');
-  if (emptyLinkRows[0]) emptyLinkRows[0].classList.add('links-header');
-  if (emptyLinkRows[1]) emptyLinkRows[1].classList.add('links-footer', 'body-s');
-  decorateBlockText(emptyLinkRows[0], blockTypeSizes.default.xsmall);
 
   const anchors = el.querySelectorAll('.anchor-link');
   if (anchors.length) decorateAnchors(anchors);

libs/blocks/merch-card/merch-card.js

@@ -398,7 +398,7 @@ const decorateFooterRows = (merchCard, footerRows) => {
       const rowIcon = row.firstElementChild.querySelector('picture');
       const rowText = row.querySelector('div > div:nth-child(2)').innerHTML;
       const rowTextParagraph = createTag('div', { class: 'footer-row-cell-description' }, rowText);
-      const footerRowCell = createTag('div', { class: 'footer-row-cell' });
+      const footerRowCell = createTag('ul', { class: 'footer-row-cell' });
       if (rowIcon) {
         rowIcon.classList.add('footer-row-icon');
         footerRowCell.appendChild(rowIcon);

libs/blocks/preflight/panels/seo.js

@@ -313,15 +313,19 @@ async function getResults() {
   const icons = [h1, title, canon, desc, body, lorem, links];
 
   const red = icons.find((icon) => icon === 'red');
-  if (red) {
-    const sk = document.querySelector('aem-sidekick, helix-sidekick');
-    if (sk) {
-      const publishBtn = sk.shadowRoot.querySelector('div.publish.plugin button');
-      publishBtn.addEventListener('click', () => {
-        sendResults();
-      });
-    }
-  }
+  if (!red) return;
+
+  const aemSk = document.querySelector('aem-sidekick');
+  const hlxSk = document.querySelector('helix-sidekick');
+  if (!aemSk && !hlxSk) return;
+
+  const publishBtn = aemSk
+    ? aemSk.shadowRoot.querySelector('plugin-action-bar').shadowRoot.querySelector('sk-action-button.publish')
+    : hlxSk.shadowRoot.querySelector('div.publish.plugin button');
+
+  publishBtn.addEventListener('click', () => {
+    sendResults();
+  });
 }
 
 export default function Panel() {

libs/blocks/review/components/review/Comments.js

@@ -6,7 +6,6 @@ import {
 } from '../../../../deps/htm-preact.js';
 
 function Comments({
-  label,
   comment,
   handleCommentChange,
   placeholderText,
@@ -61,20 +60,19 @@ function Comments({
   `;
   return html`
     <fieldset className=${commentsClass}>
-      <label htmlFor="rating-comments" />
+      <label htmlFor="rating-comments">${placeholderText}</label>
       <textarea
         id="rating-comments"
         ref=${textArea}
         cols="40"
         maxlength=${maxLength}
         name="rating-comments"
-        aria-label=${label}
-        placeholder=${placeholderText}
+        aria-label=${placeholderText}
         onInput=${onCommentChange}
         onFocus=${onFocus}
         value=${comment}
         onBlur=${onBlur}
-      />
+      ></textarea>
       <div id="ctaCover" onClick=${onCtaCoverClick}>
         ${charCountElement}
       </div>

libs/blocks/review/review.css

@@ -1,17 +1,23 @@
+/* stylelint-disable color-function-notation */
+/* stylelint-disable keyframes-name-pattern */
+/* stylelint-disable selector-id-pattern */
+/* stylelint-disable selector-class-pattern */
+/* stylelint-disable custom-property-pattern */
+/* stylelint-disable property-no-vendor-prefix */
 :root {
   --ratingBgImage: url('./img/star-outline.svg');
   --ratingActiveBgImage: url('./img/star-filled.svg');
   --focusOutlineColor: #4e8af4;
   --focusOutline: 2px solid var(--focusOutlineColor);
-  --commentBgColor: #ffffff;
+  --commentBgColor: #fff;
   --sendEnabledColor: #505050;
   --sendDisabledColor: #bcbcbc;
-  --sendHoverColor: hsl(0, 0%, 0%);
+  --sendHoverColor: hsl(0%, 0%, 0%);
   --tooltipBackground: #747474;
-  --tooltipText: #ffffff;
+  --tooltipText: #fff;
   --tooltipTransitionTime: 0.3s;
   --tooltipZIndex: 50;
-  --ratingCommentsHeight: 58px;
+  --ratingCommentsHeight: 81px;
   --ctaCommentHeight: 22px;
   --commentFieldsHeight: calc(var(--ratingCommentsHeight) + var(--ctaCommentHeight));
 }
@@ -113,6 +119,17 @@
   display: block;
 }
 
+.hlx-Review-commentFields label {
+  position: absolute;
+  top: 0;
+  left: 9px;
+  font-size: 19px;
+  color: #767676;
+  pointer-events: none;
+  transition: all 0.2s ease;
+  font-style: italic;
+}
+
 .hlx-Review-commentFields input[type='submit'] {
   position: absolute;
   right: 17px;
@@ -154,7 +171,7 @@
   height: var(--ratingCommentsHeight);
   border: none;
   outline: none;
-  padding: 6px 8px 0 8px;
+  padding: 29px 8px 0;
   font-size: 16px;
   font-style: italic;
   box-sizing: border-box;
@@ -167,7 +184,7 @@
 }
 
 .hlx-Review-commentFields .comment-counter {
-  color: #d3d3d3;
+  color: #767676;
   font-size: var(--type-body-xs-size);
 }
 
@@ -182,19 +199,19 @@
   display: block;
 }
 
-.hlx-ReviewStats-average,
-.hlx-ReviewStats-separator:first-of-type,
-.hlx-ReviewStats-outOf {
-  font-weight: 700;
-}
-
 .hlx-ReviewStats-outOf,
 .hlx-ReviewStats-separator,
 .hlx-ReviewStats-total,
 .hlx-ReviewStats-vote {
   margin-left: 3px;
 }
 
+.hlx-ReviewStats-average,
+.hlx-ReviewStats-separator:first-of-type,
+.hlx-ReviewStats-outOf {
+  font-weight: 700;
+}
+
 .hlx-submitResponse {
   font-size: 24px;
   text-align: center;
@@ -204,7 +221,7 @@
   position: relative;
 }
 
-.tooltip:before {
+.tooltip::before {
   content: attr(data-tooltip);
   position: absolute;
   right: 50%;
@@ -225,22 +242,22 @@
   visibility: hidden;
 }
 
-.tooltip:after {
+.tooltip::after {
   content: '';
   top: 100%;
   position: absolute;
-  margin: 12px 1px 0 1px;
+  margin: 12px 1px 0;
   border: 5px solid var(--tooltipBackground);
   border-color: transparent transparent var(--tooltipBackground);
   opacity: 0;
   transition: var(--tooltipTransitionTime);
   visibility: hidden;
 }
 
-.tooltip.is-hovering:before,
-.tooltip.is-hovering:after,
-.tooltip.has-keyboard-focus:before,
-.tooltip.has-keyboard-focus:after {
+.tooltip.is-hovering::before,
+.tooltip.is-hovering::after,
+.tooltip.has-keyboard-focus::before,
+.tooltip.has-keyboard-focus::after {
   opacity: 1;
   visibility: visible;
   z-index: var(--tooltipZIndex);

libs/deps/mas/merch-card.js

@@ -636,6 +636,7 @@ merch-card[variant="ccd-action"] .price-strikethrough {
     justify-content: start;
     place-items: center;
     padding: var(--consonant-merch-spacing-xs) var(--consonant-merch-spacing-s);
+    margin-block: 0px;
   }
 
   merch-card[variant="mini-compare-chart"] .footer-row-cell-description {

libs/features/mas/web-components/src/variants/mini-compare-chart.css.js

@@ -75,6 +75,7 @@ export const CSS = `
     justify-content: start;
     place-items: center;
     padding: var(--consonant-merch-spacing-xs) var(--consonant-merch-spacing-s);
+    margin-block: 0px;
   }
 
   merch-card[variant="mini-compare-chart"] .footer-row-cell-description {

libs/scripts/scripts.js

@@ -19,7 +19,7 @@ import {
 import locales from '../utils/locales.js';
 
 // Production Domain
-const prodDomains = ['milo.adobe.com'];
+const prodDomains = ['milo.adobe.com', 'business.adobe.com', 'www.adobe.com'];
 
 const stageDomainsMap = {
   'www.stage.adobe.com': {

libs/utils/decorate.js

@@ -65,9 +65,16 @@ export function decorateIconArea(el) {
   });
 }
 
+function elContainsText(el) {
+  return [...el.childNodes].some(({ nodeType, innerText, textContent }) => (
+    (nodeType === Node.ELEMENT_NODE && innerText.trim() !== '')
+    || (nodeType === Node.TEXT_NODE && textContent.trim() !== '')
+  ));
+}
+
 export function decorateBlockText(el, config = ['m', 's', 'm'], type = null) {
-  let headings = el.querySelectorAll('h1, h2, h3, h4, h5, h6');
   if (!el.classList.contains('default')) {
+    let headings = el?.querySelectorAll('h1, h2, h3, h4, h5, h6');
     if (headings) {
       if (type === 'hasDetailHeading' && headings.length > 1) headings = [...headings].splice(1);
       headings.forEach((h) => h.classList.add(`heading-${config[0]}`));
@@ -77,13 +84,12 @@ export function decorateBlockText(el, config = ['m', 's', 'm'], type = null) {
         decorateIconArea(el);
       }
     }
-    const emptyEls = el.querySelectorAll('p:not([class]), ul:not([class]), ol:not([class])');
+    const bodyStyle = `body-${config[1]}`;
+    const emptyEls = el?.querySelectorAll(':is(p, ul, ol, div):not([class])');
     if (emptyEls.length) {
-      emptyEls.forEach((p) => p.classList.add(`body-${config[1]}`));
-    } else {
-      [...el.querySelectorAll('div:not([class])')]
-        .filter((emptyDivs) => emptyDivs.textContent.trim() !== '')
-        .forEach((text) => text.classList.add(`body-${config[1]}`));
+      [...emptyEls].filter(elContainsText).forEach((e) => e.classList.add(bodyStyle));
+    } else if (!el.classList.length && elContainsText(el)) {
+      el.classList.add(bodyStyle);
     }
   }
   const buttonSize = config.length > 3 ? `button-${config[3]}` : '';