[Release] Stage to Main (#3160)

libs/blocks/caas-config/caas-config.js

@@ -966,13 +966,15 @@ const getPanels = (tagsData) => [
 ];
 
 /* c8 ignore next 15 */
-const addIdOverlays = () => {
+export const addIdOverlays = () => {
   document.querySelectorAll('.consonant-Card').forEach((card) => {
     if (!card.querySelector('.cardid')) {
       const idBtn = document.createElement('button');
       idBtn.classList.add('cardid');
       idBtn.innerText = card.id;
 
+      idBtn.title = 'Click to copy this ID';
+
       idBtn.addEventListener('click', (e) => {
         const id = e.target.textContent;
         navigator.clipboard?.writeText(id);

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/blocks/text/text.css

@@ -100,7 +100,7 @@
   position: relative;
 }
 
-.text-block .icon-list-item .icon.margin-right:not(.margin-left) { /* target first node only */
+.text-block .icon-list-item .icon.node-index-first {
   position: absolute;
   inset: 0 100% auto auto;
 }
@@ -122,7 +122,6 @@
 
 .text-block .icon-area {
   display: flex;
-  column-gap: var(--spacing-xs);
 }
 
 .text-block p.icon-area { /* NOT <a/> tags with icons in them */
@@ -218,10 +217,6 @@
   max-width: unset;
 }
 
-.text-block .icon-area.con-button {
-  column-gap: unset;
-}
-
 .text-block .icon-area picture {
   line-height: 0em;
   height: inherit; /* Safari + FF bug fix */