Mwpw-147034: Custom border color + badge/border color decoupling [Mer…

…ch card]
adobecom · Jun 24, 2024 · 0c50e78 · 0c50e78
1 parent ecf0570
commit 0c50e78
Showing 1 changed file with 5 additions and 2 deletions.
diff --git a/web-components/src/merch-card.js b/web-components/src/merch-card.js
@@ -33,6 +33,7 @@ export class MerchCard extends LitElement {
         variant: { type: String, reflect: true },
         size: { type: String, attribute: 'size', reflect: true },
         badgeColor: { type: String, attribute: 'badge-color' },
+        borderColor: { type: String, attribute: 'border-color' },
         badgeBackgroundColor: {
             type: String,
             attribute: 'badge-background-color',
@@ -110,10 +111,12 @@ export class MerchCard extends LitElement {
 
     updated(changedProperties) {
         if (
-            changedProperties.has('badgeBackgroundColor') &&
+            (changedProperties.has('badgeBackgroundColor') || changedProperties.has('borderColor')) &&
             this.variant !== 'twp'
         ) {
-            this.style.border = `1px solid ${this.badgeBackgroundColor}`;
+            this.style.border = `1px solid ${
+                this.borderColor ? this.borderColor : this.badgeBackgroundColor
+            }`;
         }
         this.updateComplete.then(async () => {
             const prices = Array.from(