review comments

adobecom · Sep 26, 2024 · 76173ad · 76173ad
1 parent 268e821
commit 76173ad
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 11 deletions.
diff --git a/libs/blocks/merch-card/merch-card.css b/libs/blocks/merch-card/merch-card.css
@@ -16,6 +16,10 @@ div[class*="-merch-card"] > div,
   display: none;
  }
 
+ merch-card .body-lower > hr {
+  width: 100%
+ }
+
  .merch-card-price {
   margin-top: 8px;
   margin-bottom: 16px;

diff --git a/libs/blocks/merch-card/merch-card.js b/libs/blocks/merch-card/merch-card.js
@@ -357,7 +357,6 @@ const simplifyHrs = (el) => {
   hrs.forEach((hr) => {
     if (hr.parentElement.tagName === 'P') {
       hr.parentElement.replaceWith(hr);
-      hr.style.width = '100%';
     }
   });
   if (el.variant === PRODUCT) {

diff --git a/libs/deps/mas/mas.js b/libs/deps/mas/mas.js
diff --git a/libs/deps/mas/merch-card.js b/libs/deps/mas/merch-card.js
@@ -1016,7 +1016,7 @@ merch-card[variant="plans"] [slot="quantity-select"] {
           <slot name="callout-content"></slot>
           <slot name="body-lower"></slot>
       </div>
-      ${this.secureLabelFooter}`}connectedCallbackHook(){super.connectedCallbackHook(),window.addEventListener("resize",this.postCardUpdateHook.bind(this))}disconnectedCallbackHook(){window.removeEventListener("resize",this.postCardUpdateHook.bind(this)),super.disconnectedCallbackHook()}postCardUpdateHook(){T()||this.adjustProductBodySlots()}static variantStyle=bt`
+      ${this.secureLabelFooter}`}connectedCallbackHook(){super.connectedCallbackHook(),window.addEventListener("resize",this.postCardUpdateHook.bind(this))}postCardUpdateHook(){T()||this.adjustProductBodySlots()}static variantStyle=bt`
     :host([variant='product']) > slot:not([name='icons']) {
         display: block;
     }
@@ -1040,7 +1040,7 @@ merch-card[variant="plans"] [slot="quantity-select"] {
         min-height: var(--consonant-merch-card-product-callout-content-height);
         display: block;
     }
-  `};import{html as U,css as yt}from"../lit-all.min.js";var nt=`
+  `};import{html as V,css as yt}from"../lit-all.min.js";var nt=`
 :root {
   --consonant-merch-card-segment-width: 378px;
 }
@@ -1086,13 +1086,13 @@ merch-card[variant="plans"] [slot="quantity-select"] {
       grid-template-columns: repeat(4, minmax(276px, var(--consonant-merch-card-segment-width)));
   }
 }
-`;var E=class extends d{constructor(t){super(t)}getGlobalCSS(){return nt}postCardUpdateHook(){this.adjustTitleWidth()}renderLayout(){return U` ${this.badge}
+`;var E=class extends d{constructor(t){super(t)}getGlobalCSS(){return nt}postCardUpdateHook(){this.adjustTitleWidth()}renderLayout(){return V` ${this.badge}
     <div class="body">
         <slot name="heading-xs"></slot>
         <slot name="body-xxs"></slot>
-        ${this.promoBottom?"":U`<slot name="promo-text"></slot><slot name="callout-content"></slot>`}
+        ${this.promoBottom?"":V`<slot name="promo-text"></slot><slot name="callout-content"></slot>`}
         <slot name="body-xs"></slot>
-        ${this.promoBottom?U`<slot name="promo-text"></slot><slot name="callout-content"></slot>`:""}
+        ${this.promoBottom?V`<slot name="promo-text"></slot><slot name="callout-content"></slot>`:""}
     </div>
     <hr />
     ${this.secureLabelFooter}`}static variantStyle=yt`
@@ -1102,7 +1102,7 @@ merch-card[variant="plans"] [slot="quantity-select"] {
     :host([variant='segment']) ::slotted([slot='heading-xs']) {
       max-width: var(--consonant-merch-card-heading-xs-max-width, 100%);
     }
-  `};import{html as V,css as wt}from"../lit-all.min.js";var ct=`
+  `};import{html as U,css as wt}from"../lit-all.min.js";var ct=`
 :root {
   --consonant-merch-card-special-offers-width: 378px;
 }
@@ -1150,20 +1150,20 @@ merch-card[variant="special-offers"] span[is="inline-price"][data-template="stri
     grid-template-columns: repeat(4, minmax(300px, var(--consonant-merch-card-special-offers-width)));
   }
 }
-`;var S=class extends d{constructor(t){super(t)}getGlobalCSS(){return ct}get headingSelector(){return'[slot="detail-m"]'}renderLayout(){return V`${this.cardImage}
+`;var S=class extends d{constructor(t){super(t)}getGlobalCSS(){return ct}get headingSelector(){return'[slot="detail-m"]'}renderLayout(){return U`${this.cardImage}
           <div class="body">
               <slot name="detail-m"></slot>
               <slot name="heading-xs"></slot>
               <slot name="body-xs"></slot>
           </div>
-          ${this.evergreen?V`
+          ${this.evergreen?U`
                     <div
                         class="detail-bg-container"
                         style="background: ${this.card.detailBg}"
                     >
                         <slot name="detail-bg"></slot>
                     </div>
-                `:V`
+                `:U`
                     <hr />
                     ${this.secureLabelFooter}
                 `}

diff --git a/libs/features/mas/web-components/test/merch-card-product.test.html b/libs/features/mas/web-components/test/merch-card-product.test.html
@@ -5,6 +5,10 @@
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>Merch Card Web Component Product Variant demo page</title>
+  <link
+        rel="stylesheet"
+        href="http://localhost:2023/__wds-outside-root__/3/styles/styles.css"
+  />
   <script>
     window.process = {
       env: {},