diff --git a/web-components/src/merch-card.js b/web-components/src/merch-card.js index 801afe37..1934a4ab 100644 --- 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', @@ -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'); } diff --git a/web-components/test/merch-card.test.html b/web-components/test/merch-card.test.html index 13f3a5b7..4eb6c3fb 100644 --- a/web-components/test/merch-card.test.html +++ b/web-components/test/merch-card.test.html @@ -673,9 +673,9 @@

Acrobat Pro

- +

merch-card aaa bbbccc dddeee bbbccc dddeee

diff --git a/web-components/test/merch-card.test.html.js b/web-components/test/merch-card.test.html.js index 8219ead5..e949bcff 100644 --- a/web-components/test/merch-card.test.html.js +++ b/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(''); + }); });