[Release] Stage to Main (adobecom#2179)

mokimo · Apr 23, 2024 · 63a752e · 63a752e
2 parents 119304a + 791778c
commit 63a752e
Show file tree

Hide file tree

Showing 9 changed files with 492 additions and 149 deletions.
diff --git a/libs/blocks/aside/aside.css b/libs/blocks/aside/aside.css
@@ -415,7 +415,7 @@
 }
 
 .aside.notification.center.small .foreground.container .text p {
-  text-align: left;
+  text-align: initial;
 }
 
 .aside.notification.large .foreground.container {
@@ -799,6 +799,11 @@
     margin-left: 24px;
   }
 
+  [dir = "rtl"] .aside.notification.small .foreground.container .text .body-m.action-area {
+    margin-left: 0;
+    margin-right: 24px;
+  }
+
   .aside.split.half .foreground.container .text {
     flex: 0 0 41.72%;
   }
@@ -839,6 +844,11 @@
     margin-bottom: 0;
   }
 
+  [dir = "rtl"] .aside.notification .foreground.container .icon-area {
+    margin-left: var(--spacing-xs);
+    margin-right: 0;
+  }
+
   .aside.notification.extra-small .foreground.container.no-image .text {
     display: flex;
   }

diff --git a/libs/blocks/card-horizontal/card-horizontal.css b/libs/blocks/card-horizontal/card-horizontal.css
@@ -65,7 +65,7 @@
   position: relative;
   display: flex;
   flex-direction: row;
-  text-align: left;
+  text-align: initial;
   align-items: center;
   background-color: white;
   border-radius: 4px;
@@ -98,6 +98,11 @@
   flex-grow: 1;
 }
 
+[dir = "rtl"] .card-horizontal .foreground .card-block .card-content {
+  padding-left: var(--spacing-s);
+  padding-right: 0;
+}
+
 .card-horizontal .foreground .card-block .card-image {
   height: 130px;
   flex: 0 0 90px;
@@ -151,6 +156,11 @@
   margin-left: var(--spacing-s);
 }
 
+[dir = "rtl"] .card-horizontal.tile .foreground .card-block .card-image img {
+  margin-left: 0;
+  margin-right: var(--spacing-s);
+}
+
 .two-up .card-horizontal .foreground .card-block .card-image,
 .three-up .card-horizontal .foreground .card-block .card-image {
   flex: 0 0 91px;
@@ -169,6 +179,11 @@
     padding-right: var(--spacing-m);
   }
 
+  [dir = "rtl"] .card-horizontal.tile .foreground .card-block .card-content {
+    padding-left: var(--spacing-m);
+    padding-right: 0;
+  }
+
   .card-horizontal.tile .foreground .card-block .card-image {
     flex: 0 0 106px;
   }
@@ -183,6 +198,11 @@
     margin-left: var(--spacing-m);
   }
 
+  [dir = "rtl"] .card-horizontal.tile .foreground .card-block .card-image img {
+    margin-left: 0;
+    margin-right: var(--spacing-m);
+  }
+
   .two-up .card-horizontal .foreground .card-block {
     gap: var(--spacing-s);
   }
@@ -199,19 +219,34 @@
     padding-right: var(--spacing-s);
   }
 
+  [dir = "rtl"] .two-up .card-horizontal.tile .foreground .card-block .card-content {
+    padding-left: var(--spacing-s);
+    padding-right: 0;
+  }
+
   .two-up .card-horizontal.tile .foreground .card-block .card-image img {
     width: 74px;
     height: 72px;
     margin-left: var(--spacing-s);
   }
 
+  [dir = "rtl"] .two-up .card-horizontal.tile .foreground .card-block .card-image img {
+    margin-left: 0;
+    margin-right: var(--spacing-s);
+  }
+
   .three-up .card-horizontal.tile .foreground .card-block .card-image {
     flex: 0 0 98px;
   }
 
   .three-up .card-horizontal.tile .foreground .card-block .card-image img {
     margin-left: var(--spacing-s);
   }
+
+  [dir = "rtl"] .three-up .card-horizontal.tile .foreground .card-block .card-image img {
+    margin-left: 0;
+    margin-right: var(--spacing-s);
+  }
 }
 
 @media screen and (min-width: 1200px) {
@@ -224,14 +259,29 @@
     padding-right: var(--spacing-m);
   }
 
+  [dir = "rtl"] .card-horizontal .foreground .card-block .card-content {
+    padding-left: var(--spacing-m);
+    padding-right: 0;
+  }
+
   .two-up .card-horizontal .foreground .card-block .card-content {
     padding-right: var(--spacing-s);
   }
 
+  [dir = "rtl"] .two-up .card-horizontal .foreground .card-block .card-content {
+    padding-left: var(--spacing-s);
+    padding-right: 0;
+  }
+
   .three-up .card-horizontal .foreground .card-block .card-content {
     padding-right: var(--spacing-s);
   }
 
+  [dir = "rtl"] .three-up .card-horizontal .foreground .card-block .card-content {
+    padding-left: var(--spacing-s);
+    padding-right: 0;
+  }
+
   .card-horizontal .foreground .card-block .card-image {
     flex: 0 0 180px;
   }
@@ -264,11 +314,21 @@
     margin-left: var(--spacing-s);
   }
 
+  [dir = "rtl"] .two-up .card-horizontal.tile .foreground .card-block .card-image img {
+    margin-left: 0;
+    margin-right: var(--spacing-s);
+  }
+
   .three-up .card-horizontal.tile .foreground .card-block .card-image {
     flex: 0 0 98px;
   }
 
   .three-up .card-horizontal.tile .foreground .card-block .card-image img {
     margin-left: var(--spacing-s);
   }
+
+  [dir = "rtl"] .three-up .card-horizontal.tile .foreground .card-block .card-image img {
+    margin-left: 0;
+    margin-right: var(--spacing-s);
+  }
 }
diff --git a/libs/blocks/merch-card/merch-card.js b/libs/blocks/merch-card/merch-card.js
@@ -29,10 +29,9 @@ 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.
 const intersectionObserver = new IntersectionObserver((entries) => {
   entries.forEach((entry) => {
-    const container = entry.target.closest('main > div');
-    if (!container) return;
-    [...container.querySelectorAll('merch-card')].forEach((card) => card.requestUpdate());
+    if (entry.target.clientHeight === 0) return;
     intersectionObserver.unobserve(entry.target);
+    entry.target.requestUpdate();
   });
 });
 
@@ -42,16 +41,13 @@ const isHeadingTag = (tagName) => /^H[2-5]$/.test(tagName);
 const isParagraphTag = (tagName) => tagName === 'P';
 
 const appendSlot = (slotEls, slotName, merchCard) => {
-  if (slotEls.length === 0) return;
+  if (slotEls.length === 0 && merchCard.variant !== MINI_COMPARE_CHART) return;
   const newEl = createTag(
     'p',
     { slot: slotName, class: slotName },
   );
-  slotEls.forEach((e, index) => {
+  slotEls.forEach((e) => {
     newEl.innerHTML += e.innerHTML;
-    if (index < slotEls.length - 1) {
-      newEl.innerHTML += '<br>';
-    }
   });
   merchCard.append(newEl);
 };
@@ -201,7 +197,7 @@ const simplifyHrs = (el) => {
   });
 };
 
-function extractQuantitySelect(el) {
+async function extractQuantitySelect(el) {
   const quantitySelectConfig = el.querySelector('ul');
   if (!quantitySelectConfig) return null;
   const configMarkup = quantitySelectConfig.querySelector('li');
@@ -215,7 +211,7 @@ function extractQuantitySelect(el) {
     .filter((value) => /^\d*$/.test(value))
     .map((value) => (value === '' ? undefined : Number(value)));
   if (![3, 4, 5].includes(values.length)) return null;
-  import('../../deps/merch-quantity-select.js');
+  await import('../../deps/merch-quantity-select.js');
   [attributes.min, attributes.max, attributes.step, attributes['default-value'], attributes['max-input']] = values;
   const quantitySelect = createTag('merch-quantity-select', attributes);
   quantitySelectConfig.remove();
@@ -238,7 +234,7 @@ const decorateFooterRows = (merchCard, footerRows) => {
     footerRows.forEach((row) => {
       const rowIcon = row.firstElementChild.querySelector('picture');
       const rowText = row.querySelector('div > div:nth-child(2)').innerHTML;
-      const rowTextParagraph = createTag('p', { class: 'footer-row-cell-description' }, rowText);
+      const rowTextParagraph = createTag('div', { class: 'footer-row-cell-description' }, rowText);
       const footerRowCell = createTag('div', { class: 'footer-row-cell' });
       if (rowIcon) {
         rowIcon.classList.add('footer-row-icon');
@@ -253,8 +249,12 @@ const decorateFooterRows = (merchCard, footerRows) => {
 
 const setMiniCompareOfferSlot = (merchCard, offers) => {
   if (merchCard.variant !== MINI_COMPARE_CHART) return;
-  const miniCompareOffers = createTag('div', { slot: 'offers' }, offers);
-  if (offers === undefined) { miniCompareOffers.appendChild(createTag('p')); }
+  const miniCompareOffers = merchCard.querySelector('div[slot="offers"]');
+  if (offers) {
+    miniCompareOffers.append(offers);
+  } else {
+    miniCompareOffers.appendChild(createTag('p'));
+  }
   merchCard.appendChild(miniCompareOffers);
 };
 
@@ -319,10 +319,7 @@ const init = async (el) => {
   }
   let footerRows;
   if (cardType === MINI_COMPARE_CHART) {
-    const container = el.closest('[data-status="decorated"]');
-    if (container) {
-      intersectionObserver.observe(container);
-    }
+    intersectionObserver.observe(merchCard);
     footerRows = getMiniCompareChartFooterRows(el);
   }
   const images = el.querySelectorAll('picture');
@@ -399,7 +396,11 @@ const init = async (el) => {
   merchCard.appendChild(footer);
 
   if (MULTI_OFFER_CARDS.includes(cardType)) {
-    const quantitySelect = extractQuantitySelect(el);
+    if (merchCard.variant === MINI_COMPARE_CHART) {
+      const miniCompareOffers = createTag('div', { slot: 'offers' });
+      merchCard.append(miniCompareOffers);
+    }
+    const quantitySelect = await extractQuantitySelect(el, cardType);
     const offerSelection = el.querySelector('ul');
     if (offerSelection) {
       const { initOfferSelection } = await import('./merch-offer-select.js');

diff --git a/libs/blocks/merch-card/merch-offer-select.js b/libs/blocks/merch-card/merch-offer-select.js
@@ -7,7 +7,7 @@ const MINI_COMPARE_CHART = 'mini-compare-chart';
 function createDynamicSlots(el, bodySlot) {
   const pricePlaceholder = el.querySelector("span[is='inline-price']");
   if (pricePlaceholder) {
-    pricePlaceholder.parentNode.replaceChild(createTag('span', { slot: 'price', is: 'inline-price' }), pricePlaceholder);
+    pricePlaceholder.setAttribute('slot', 'price');
   } else {
     const priceSlot = createTag('h5', { class: 'merch-card-price' });
     createTag('span', { slot: 'price', is: 'inline-price' }, null, { parent: priceSlot });