Various catalog fixes + SWC updates (#2347)

https://git.corp.adobe.com/wcms/tacocat.js/pull/591 https://git.corp.adobe.com/wcms/tacocat.js/pull/605
adobecom · May 30, 2024 · b128b82 · b128b82
1 parent 29d0a16
commit b128b82
Show file tree

Hide file tree

Showing 57 changed files with 2,332 additions and 998 deletions.
diff --git a/libs/blocks/merch-card-collection/merch-card-collection.css b/libs/blocks/merch-card-collection/merch-card-collection.css
@@ -1,3 +1,7 @@
 .section[class*="-merch-cards"] .full-width {
   grid-column: 1 / -1;
 }
+
+merch-card-collection {
+  --link-color: var(--merch-color-grey-80);
+}
diff --git a/libs/blocks/merch-card-collection/merch-card-collection.js b/libs/blocks/merch-card-collection/merch-card-collection.js
@@ -220,10 +220,12 @@ export default async function init(el) {
       ...deps,
       import(`${base}/features/spectrum-web-components/dist/theme.js`),
       import(`${base}/features/spectrum-web-components/dist/button.js`),
+      import(`${base}/features/spectrum-web-components/dist/action-button.js`),
+      import(`${base}/features/spectrum-web-components/dist/action-menu.js`),
       import(`${base}/features/spectrum-web-components/dist/search.js`),
-      import(`${base}/features/spectrum-web-components/dist/overlay.js`),
       import(`${base}/features/spectrum-web-components/dist/menu.js`),
-      import(`${base}/features/spectrum-web-components/dist/popover.js`),
+      import(`${base}/features/spectrum-web-components/dist/overlay.js`),
+      import(`${base}/features/spectrum-web-components/dist/tray.js`),
     ] : [];
 
   const preferences = {};

diff --git a/libs/blocks/merch-card/merch-card.css b/libs/blocks/merch-card/merch-card.css
@@ -8,6 +8,14 @@ div[class*="-merch-card"] > div,
    grid-column: 1 / -1;
  }
 
+ merch-card .action-area, merch-card div[slot="footer"] > p {
+  display: contents;
+ }
+
+ merch-card .action-area br {
+  display: none;
+ }
+
  .merch-card-price {
   margin-top: 8px;
   margin-bottom: 16px;
@@ -34,10 +42,11 @@ merch-card a[is="checkout-link"].upgrade:not(:first-of-type) {
   display: none;
 }
 
-/* Tablet and larger */
-@media screen and (min-width: 768px) {
-  .badge-merch-cards .card-heading,
-  .badge-card .card-heading {
-    margin-top: var(--spacing-s);
+@media screen and (max-width: 1199px) {
+  merch-card[variant="mini-compare-chart"] [slot="footer"] a.con-button {
+    min-width: 66px; /* same as merch links */
+    padding: 4px 18px 5px 21px;
+    font-size: var(--consonant-merch-card-mini-compare-mobile-cta-font-size);
+
   }
 }
diff --git a/libs/blocks/merch-card/merch-card.js b/libs/blocks/merch-card/merch-card.js
@@ -26,6 +26,10 @@ const HEADING_MAP = {
 };
 
 const MINI_COMPARE_CHART = 'mini-compare-chart';
+const PLANS = 'plans';
+const SEGMENT = 'segment';
+
+const INNER_ELEMENTS_SELECTOR = 'h2, h3, h4, h5, p, ul, em';
 
 const MULTI_OFFER_CARDS = ['plans', 'product', MINI_COMPARE_CHART];
 // Force cards to refresh once they become visible so that the footer rows are properly aligned.
@@ -87,7 +91,7 @@ const parseContent = async (el, merchCard) => {
     await loadMnemonicList(mnemonicList);
   }
   const innerElements = [
-    ...el.querySelectorAll('h2, h3, h4, h5, p, ul, em'),
+    ...el.querySelectorAll(INNER_ELEMENTS_SELECTOR),
   ];
   innerElements.forEach((element) => {
     let { tagName } = element;
@@ -282,7 +286,8 @@ const setMiniCompareOfferSlot = (merchCard, offers) => {
   merchCard.appendChild(miniCompareOffers);
 };
 
-const init = async (el) => {
+export default async function init(el) {
+  if (!el.querySelector(INNER_ELEMENTS_SELECTOR)) return el;
   const styles = [...el.classList];
   const cardType = getPodType(styles) || 'product';
   if (!styles.includes(cardType)) {
@@ -345,8 +350,10 @@ const init = async (el) => {
     }
   }
   let footerRows;
-  if (cardType === MINI_COMPARE_CHART) {
+  if ([MINI_COMPARE_CHART, PLANS, SEGMENT].includes(cardType)) {
     intersectionObserver.observe(merchCard);
+  }
+  if (cardType === MINI_COMPARE_CHART) {
     footerRows = getMiniCompareChartFooterRows(el);
   }
   const allPictures = el.querySelectorAll('picture');
@@ -390,18 +397,20 @@ const init = async (el) => {
     imageSlot.appendChild(image);
     merchCard.appendChild(imageSlot);
   }
+  parseContent(el, merchCard);
   if (!icons || icons.length > 0) {
     const iconImgs = Array.from(icons).map((icon) => {
       const img = {
         src: icon.querySelector('img').src,
         alt: icon.querySelector('img').alt,
+        href: icon.closest('a')?.href ?? '',
       };
       return img;
     });
-    merchCard.setAttribute(
-      'icons',
-      JSON.stringify(Array.from(iconImgs)),
-    );
+    iconImgs.forEach((icon) => {
+      const merchIcon = createTag('merch-icon', { slot: 'icons', src: icon.src, alt: icon.alt, href: icon.href, size: 'l' });
+      merchCard.appendChild(merchIcon);
+    });
     icons.forEach((icon) => icon.remove());
   }
 
@@ -411,15 +420,17 @@ const init = async (el) => {
   }
   merchCard.setAttribute('filters', categories.join(','));
   merchCard.setAttribute('types', types.join(','));
-  parseContent(el, merchCard);
+
   const footer = createTag('div', { slot: 'footer' });
   if (ctas) {
     if (merchCard.variant === 'mini-compare-chart') {
       decorateButtons(ctas, 'button-l');
     } else {
       decorateButtons(ctas);
     }
-    footer.append(ctas);
+    const links = ctas.querySelectorAll('a');
+    ctas.remove();
+    footer.append(...links);
   }
   merchCard.appendChild(footer);
 
@@ -453,6 +464,4 @@ const init = async (el) => {
   el.replaceWith(merchCard);
   decorateMerchCardLinkAnalytics(merchCard);
   return merchCard;
-};
-
-export default init;
+}
diff --git a/libs/blocks/merch/merch.css b/libs/blocks/merch/merch.css
@@ -18,6 +18,7 @@ span.placeholder-resolved[data-template="strikethrough"], span.price.price-strik
 a[is='checkout-link'] > span {
   display: inline-block;
   text-align: center;
+  width: 100%;
   min-width: 66px;
 }