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

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',
@@ -109,11 +110,8 @@ export class MerchCard extends LitElement {
     #container;
 
     updated(changedProperties) {
-        if (
-            changedProperties.has('badgeBackgroundColor') &&
-            this.variant !== 'twp'
-        ) {
-            this.style.border = `1px solid ${this.badgeBackgroundColor}`;
+        if (changedProperties.has('badgeBackgroundColor') || changedProperties.has('borderColor')) {
+            this.style.border = this.computedBorderStyle;
         }
         this.updateComplete.then(async () => {
             const prices = Array.from(
@@ -126,6 +124,15 @@ export class MerchCard extends LitElement {
         });
     }
 
+    get computedBorderStyle() {
+        if (this.variant !== 'twp') {
+            return `1px solid ${
+                this.borderColor ? this.borderColor : this.badgeBackgroundColor
+            }`;
+        }
+        return '';
+    }
+
     get evergreen() {
         return this.classList.contains('intro-pricing');
     }

web-components/test/merch-card.test.html

@@ -673,9 +673,9 @@ <h4 slot="heading-xs">Acrobat Pro</h4>
             </merch-card>
         </div>
         <div class="three-merch-cards segment">
-            <merch-card class="merch-card background-opacity-70 segment badge-card" variant="segment" size=""
-                badge-background-color="#2D9D78" badge-color="#fff" badge-text="Save a lot" filters="all" types="" tabindex="0"
-                style="border: 1px solid rgb(45, 157, 120);">
+            <merch-card class="merch-card background-opacity-70 segment badge-card custom-border-color" variant="segment" size=""
+                badge-background-color="#2D9D78" badge-color="#fff" badge-text="Save a lot" filters="all" types="" tabindex="0" border-color="#1473E6"
+                style="border: 1px solid rgb(20, 115, 230);">
                 <h3 id="merch-card-background-opacity-70-segment" class="card-heading" slot="heading-xs">merch-card aaa bbbccc dddeee bbbccc dddeee</h3>
                 <div slot="body-xs">
                     <h5 id="this-is-the-green-promo-text-with-link">This is the green promo text with <a href="https://www.adobe.com">link</a>!</h5>

web-components/test/merch-card.test.html.js

@@ -135,4 +135,11 @@ runTests(async () => {
         ).title;
         expect(title).to.equal('Individuals');
     });
+
+    it('should have custom border color for segment card', async () => {
+        const segmentCard = document.querySelector('merch-card[variant="segment"].custom-border-color');
+        const borderColor = segmentCard.getAttribute('border-color');
+        expect(borderColor).to.exist;
+        expect(borderColor).to.not.equal('');
+    });
 });