@paypal/checkout-components 5.0.413 → 5.0.414

package/src/ui/buttons/props.test.js

@@ -11,7 +11,6 @@ import {
   getColorForABTest,
   getDefaultColorForFundingSource,
   throwErrorForInvalidButtonColor,
-  hasInvalidScriptOptionsForFullRedesign,
   determineRandomButtonColor,
   getColorABTestFromStorage,
 } from "./props";
@@ -128,47 +127,6 @@ describe("determineRandomButtonColor", () => {
   });
 });
 
-describe("hasInvalidScriptOptionsForFullRedesign", () => {
-  const validFundingSources = [
-    FUNDING.PAYPAL,
-    FUNDING.PAYLATER,
-    FUNDING.CREDIT,
-    FUNDING.CARD,
-    FUNDING.VENMO,
-  ];
-  const invalidFundingSources = [FUNDING.APPLEPAY, FUNDING.IDEAL];
-
-  // Test valid funding sources
-  validFundingSources.forEach((fundingSource) => {
-    it(`should return false for fundingSource: ${fundingSource}`, () => {
-      const result = hasInvalidScriptOptionsForFullRedesign({
-        fundingSource,
-      });
-
-      expect(result).toBe(false);
-    });
-  });
-
-  // Test invalid funding sources
-  invalidFundingSources.forEach((fundingSource) => {
-    it(`should return true for fundingSource: ${fundingSource}`, () => {
-      const result = hasInvalidScriptOptionsForFullRedesign({
-        fundingSource,
-      });
-
-      expect(result).toBe(true);
-    });
-  });
-
-  it("should return true when funding source is null", () => {
-    const result = hasInvalidScriptOptionsForFullRedesign({
-      fundingSource: null,
-    });
-
-    expect(result).toBe(true);
-  });
-});
-
 describe("throwErrorForInvalidButtonColor", () => {
   it("should throw error with appropriate message for invalid color", () => {
     expect(() => {

package/src/ui/buttons/script.jsx

@@ -199,58 +199,13 @@ export function getComponentScript(): () => void {
       }
     }
 
-    function toggleLogos() {
-      const LOGO_CLASS = {
-        PAYPAL_LOGO: ".paypal-logo-paypal-rebrand",
-        PP_LOGO: ".paypal-logo-pp-rebrand",
-        PAYPAL_BUTTON: ".paypal-button-rebrand",
-        BUTTON_LABEL: ".paypal-button-label-container",
-      };
-
-      const paylaterButtons = getElements(LOGO_CLASS.PAYPAL_BUTTON);
-
-      for (const button of paylaterButtons) {
-        const paypalLogo = button.querySelector(LOGO_CLASS.PAYPAL_LOGO);
-        const ppLogo = button.querySelector(LOGO_CLASS.PP_LOGO);
-        const buttonLabel = button.querySelector(LOGO_CLASS.BUTTON_LABEL);
-
-        if (!buttonLabel || !paypalLogo || !ppLogo) {
-          continue;
-        }
-
-        const buttonWidth = buttonLabel.offsetWidth;
-        const gap = calculateGap(buttonLabel);
-
-        // temporarily hide PayPal logos
-        hideElement(paypalLogo);
-        hideElement(ppLogo);
-
-        const allElements = getAllChildren(buttonLabel);
-        const textElements = allElements.filter(
-          (el) => !el.classList.contains("paypal-logo-pp-rebrand")
-        );
-
-        const totalWidth = getElementsTotalWidth(textElements) + gap;
-
-        if (totalWidth > buttonWidth) {
-          hideElement(paypalLogo);
-          showElement(ppLogo);
-        } else {
-          showElement(paypalLogo);
-          hideElement(ppLogo);
-        }
-      }
-    }
-
     const setDomReady = once(
       debounce(() => {
         window.addEventListener("resize", () => {
           toggleOptionals();
-          toggleLogos();
         });
         setTimeout(() => {
           toggleOptionals();
-          toggleLogos();
         });
         if (document.body) {
           document.body.classList.add(CLASS.DOM_READY);
@@ -260,12 +215,10 @@ export function getComponentScript(): () => void {
 
     const load = () => {
       toggleOptionals();
-      toggleLogos();
       setDomReady();
     };
 
     toggleOptionals();
-    toggleLogos();
     document.addEventListener("DOMContentLoaded", load);
     window.addEventListener("load", load);
     window.addEventListener("resize", load);

package/src/ui/buttons/styles/button.js

@@ -4,6 +4,10 @@ import { ENV } from "@paypal/sdk-constants/src";
 import { LOGO_CLASS } from "@paypal/sdk-logos/src";
 
 import { CLASS } from "../../../constants";
+import {
+  REBRAND_LABEL_HEIGHT_RATIO,
+  REBRAND_LOGO_TRANSLATE_Y,
+} from "../config";
 
 const MIN_VAULT_BUTTON_WIDTH = 250;
 
@@ -104,8 +108,8 @@ export const buttonStyle = `
 
     .${CLASS.BUTTON} .${CLASS.SPINNER} {
         position: absolute;
-        height: 40px;
-        width: 40px;
+        height: 50%;
+        aspect-ratio: 1;
         top: 50%;
         left: 50%;
         transform: translateX(-50%) translateY(-50%);
@@ -171,7 +175,7 @@ export const buttonRebrandStyle = `
         align-items: center;
         justify-content: center;
         flex-wrap: nowrap;
-        height: 76%;
+        height: ${REBRAND_LABEL_HEIGHT_RATIO * 100}%;
         min-width: 0px;
         position: relative;
     }
@@ -200,12 +204,25 @@ export const buttonRebrandStyle = `
         height: 100%;
     }
 
-    .${CLASS.BUTTON_REBRAND} .${CLASS.TAGLINE} {
+    .${CLASS.BUTTON_REBRAND} .${CLASS.BUTTON_LABEL} > .${CLASS.LOGO_REBRAND} {
+        transform: translateY(${REBRAND_LOGO_TRANSLATE_Y}%);
+    }
+
+    .${CLASS.BUTTON_REBRAND}[data-funding-source=wechatpay] .${CLASS.TEXT},
+    .${CLASS.BUTTON_REBRAND}[data-funding-source=satispay] .${CLASS.TEXT},
+    .${CLASS.BUTTON_REBRAND}[data-funding-source=giropay] .${CLASS.TEXT},
+    .${CLASS.BUTTON_REBRAND}[data-funding-source=paidy] .${CLASS.TEXT},
+    .${CLASS.BUTTON_REBRAND}[data-funding-source=trustly] .${CLASS.TEXT} {
+        transform: translateY(-1px);
+    }
+
+    .${CLASS.BUTTON_REBRAND}.${CLASS.TAGLINE} {
         max-width: 100%;
         font-size: initial;
         font-weight: 400;
         display: block;
         text-align: center;
         width: auto;
+        margin-top: 8px;
     }
 `;

package/src/ui/buttons/styles/color.js

@@ -54,6 +54,10 @@ export const buttonColorStyle = `
             background: #54B4E0;
             overflow: inherit;
         }
+
+        .${CLASS.BUTTON_REBRAND}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.VENMO}].${CLASS.COLOR}-${BUTTON_COLOR.REBRAND_BLUE}:hover {
+            background: #0073E0;
+        }
     }
     
     @media (hover:hover) {
@@ -61,6 +65,10 @@ export const buttonColorStyle = `
             background: #3DB5FF;
             overflow: inherit;
         }
+
+        .${CLASS.BUTTON_REBRAND}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.VENMO}].${CLASS.COLOR}-${BUTTON_COLOR.REBRAND_BLUE}:active {
+            background: #0074FF;
+        }
     }
 
     .${CLASS.BUTTON}.${CLASS.COLOR}-${BUTTON_COLOR.REBRAND_DARKBLUE},
@@ -151,7 +159,7 @@ export const buttonColorStyle = `
     .${CLASS.BUTTON_REBRAND}:focus {
         outline: none;
     }
-    
+
     .${CLASS.BUTTON_REBRAND}:focus::after {
         content: '';
         position: absolute;
@@ -160,7 +168,7 @@ export const buttonColorStyle = `
         bottom: 3px;
         left: 3px;
         border: 0.125rem solid #FFFFFF;
-        border-radius: inherit;
+        border-radius: max(0px, calc(var(--btn-radius, 4px) - 3px));
         box-shadow: 0 0 0 0.2rem #0066F5;
         pointer-events: none;
     }
@@ -249,6 +257,14 @@ export const buttonColorStyle = `
         background: #E62601;
     }
 
+    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.ITAU}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT} {
+        background: #003087;
+    }
+
+    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.SEPA}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT} {
+        background: #eee;
+    }
+
     /* APM button hover actions */
     .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.BANCONTACT}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:hover,
     .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.BLIK}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:hover,
@@ -267,52 +283,62 @@ export const buttonColorStyle = `
     .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.PAYU}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:hover,
     .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.SATISPAY}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:hover,
     .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.PAIDY}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:hover,
-    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.WECHATPAY}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:hover {
+    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.WECHATPAY}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:hover,
+    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.ITAU}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:hover {
         filter: brightness(1.2);
         overflow: inherit;
     }
 
-    /* APM button on focus actions */
-    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.BLIK}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus,
-    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.BANCONTACT}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus,
-    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.BOLETO}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus,
-    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.BOLETOBANCARIO}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus,
-    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.EPS}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus,
-    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.GIROPAY}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus,
-    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.IDEAL}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus,
-    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.MERCADOPAGO}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus,
-    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.MULTIBANCO}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus,
-    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.MYBANK}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus,
-    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.OXXO}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus,
-    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.P24}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus,
-    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.SOFORT}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus,
-    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.TRUSTLY}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus,
-    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.PAYU}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus,
-    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.SATISPAY}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus,
-    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.PAIDY}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus,
-    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.WECHATPAY}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus {
+    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.SEPA}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:hover {
+        filter: brightness(0.95);
+        overflow: inherit;
+    }
+
+    /* APM button on focus actions (legacy only) */
+    .${CLASS.BUTTON}:not(.${CLASS.BUTTON_REBRAND})[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.BLIK}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus,
+    .${CLASS.BUTTON}:not(.${CLASS.BUTTON_REBRAND})[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.BANCONTACT}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus,
+    .${CLASS.BUTTON}:not(.${CLASS.BUTTON_REBRAND})[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.BOLETO}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus,
+    .${CLASS.BUTTON}:not(.${CLASS.BUTTON_REBRAND})[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.BOLETOBANCARIO}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus,
+    .${CLASS.BUTTON}:not(.${CLASS.BUTTON_REBRAND})[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.EPS}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus,
+    .${CLASS.BUTTON}:not(.${CLASS.BUTTON_REBRAND})[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.GIROPAY}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus,
+    .${CLASS.BUTTON}:not(.${CLASS.BUTTON_REBRAND})[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.IDEAL}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus,
+    .${CLASS.BUTTON}:not(.${CLASS.BUTTON_REBRAND})[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.MERCADOPAGO}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus,
+    .${CLASS.BUTTON}:not(.${CLASS.BUTTON_REBRAND})[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.MULTIBANCO}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus,
+    .${CLASS.BUTTON}:not(.${CLASS.BUTTON_REBRAND})[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.MYBANK}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus,
+    .${CLASS.BUTTON}:not(.${CLASS.BUTTON_REBRAND})[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.OXXO}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus,
+    .${CLASS.BUTTON}:not(.${CLASS.BUTTON_REBRAND})[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.P24}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus,
+    .${CLASS.BUTTON}:not(.${CLASS.BUTTON_REBRAND})[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.SOFORT}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus,
+    .${CLASS.BUTTON}:not(.${CLASS.BUTTON_REBRAND})[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.TRUSTLY}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus,
+    .${CLASS.BUTTON}:not(.${CLASS.BUTTON_REBRAND})[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.PAYU}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus,
+    .${CLASS.BUTTON}:not(.${CLASS.BUTTON_REBRAND})[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.SATISPAY}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus,
+    .${CLASS.BUTTON}:not(.${CLASS.BUTTON_REBRAND})[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.PAIDY}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus,
+    .${CLASS.BUTTON}:not(.${CLASS.BUTTON_REBRAND})[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.WECHATPAY}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus,
+    .${CLASS.BUTTON}:not(.${CLASS.BUTTON_REBRAND})[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.ITAU}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus,
+    .${CLASS.BUTTON}:not(.${CLASS.BUTTON_REBRAND})[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.SEPA}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus {
         outline: none;
     }
 
-    /* APM button after focus actions */
-    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.BLIK}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus::after,
-    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.BANCONTACT}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus::after,
-    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.BOLETO}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus::after,
-    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.BOLETOBANCARIO}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus::after,
-    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.EPS}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus::after,
-    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.GIROPAY}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus::after,
-    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.IDEAL}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus::after,
-    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.MERCADOPAGO}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus::after,
-    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.MULTIBANCO}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus::after,
-    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.MYBANK}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus::after,
-    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.OXXO}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus::after,
-    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.P24}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus::after,
-    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.SOFORT}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus::after,
-    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.TRUSTLY}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus::after,
-    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.PAYU}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus::after,
-    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.SATISPAY}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus::after,
-    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.PAIDY}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus::after,
-    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.WECHATPAY}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus::after {
+    /* APM button after focus actions (legacy only) */
+    .${CLASS.BUTTON}:not(.${CLASS.BUTTON_REBRAND})[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.BLIK}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus::after,
+    .${CLASS.BUTTON}:not(.${CLASS.BUTTON_REBRAND})[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.BANCONTACT}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus::after,
+    .${CLASS.BUTTON}:not(.${CLASS.BUTTON_REBRAND})[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.BOLETO}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus::after,
+    .${CLASS.BUTTON}:not(.${CLASS.BUTTON_REBRAND})[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.BOLETOBANCARIO}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus::after,
+    .${CLASS.BUTTON}:not(.${CLASS.BUTTON_REBRAND})[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.EPS}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus::after,
+    .${CLASS.BUTTON}:not(.${CLASS.BUTTON_REBRAND})[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.GIROPAY}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus::after,
+    .${CLASS.BUTTON}:not(.${CLASS.BUTTON_REBRAND})[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.IDEAL}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus::after,
+    .${CLASS.BUTTON}:not(.${CLASS.BUTTON_REBRAND})[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.MERCADOPAGO}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus::after,
+    .${CLASS.BUTTON}:not(.${CLASS.BUTTON_REBRAND})[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.MULTIBANCO}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus::after,
+    .${CLASS.BUTTON}:not(.${CLASS.BUTTON_REBRAND})[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.MYBANK}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus::after,
+    .${CLASS.BUTTON}:not(.${CLASS.BUTTON_REBRAND})[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.OXXO}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus::after,
+    .${CLASS.BUTTON}:not(.${CLASS.BUTTON_REBRAND})[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.P24}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus::after,
+    .${CLASS.BUTTON}:not(.${CLASS.BUTTON_REBRAND})[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.SOFORT}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus::after,
+    .${CLASS.BUTTON}:not(.${CLASS.BUTTON_REBRAND})[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.TRUSTLY}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus::after,
+    .${CLASS.BUTTON}:not(.${CLASS.BUTTON_REBRAND})[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.PAYU}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus::after,
+    .${CLASS.BUTTON}:not(.${CLASS.BUTTON_REBRAND})[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.SATISPAY}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus::after,
+    .${CLASS.BUTTON}:not(.${CLASS.BUTTON_REBRAND})[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.PAIDY}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus::after,
+    .${CLASS.BUTTON}:not(.${CLASS.BUTTON_REBRAND})[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.WECHATPAY}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus::after,
+    .${CLASS.BUTTON}:not(.${CLASS.BUTTON_REBRAND})[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.ITAU}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus::after,
+    .${CLASS.BUTTON}:not(.${CLASS.BUTTON_REBRAND})[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.SEPA}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus::after {
         content: '';
         position: absolute;
         top: 5px;

package/src/ui/buttons/styles/disableMaxHeightConfig.test.js

@@ -0,0 +1,71 @@
+/* @flow */
+
+import { describe, expect, test } from "vitest";
+
+import {
+  BUTTON_REDESIGN_STYLE,
+  BUTTON_REDESIGN_DISABLEMAXHEIGHT_STYLE,
+} from "../config";
+
+describe("BUTTON_REDESIGN_DISABLEMAXHEIGHT_STYLE config", () => {
+  test("should include all BUTTON_REDESIGN_STYLE buckets", () => {
+    Object.keys(BUTTON_REDESIGN_STYLE).forEach((key) => {
+      expect(BUTTON_REDESIGN_DISABLEMAXHEIGHT_STYLE).toHaveProperty(key);
+    });
+  });
+
+  test("should have XL_BIG bucket with correct values", () => {
+    expect(BUTTON_REDESIGN_DISABLEMAXHEIGHT_STYLE.XL_BIG).toEqual({
+      minHeight: 60,
+      maxHeight: 65,
+      gap: 6,
+      fontSize: 20,
+    });
+  });
+
+  test("should have XXL_SMALL bucket with correct values", () => {
+    expect(BUTTON_REDESIGN_DISABLEMAXHEIGHT_STYLE.XXL_SMALL).toEqual({
+      minHeight: 65,
+      maxHeight: 70,
+      gap: 7,
+      fontSize: 22,
+    });
+  });
+
+  test("should have XXL_BIG bucket with correct values", () => {
+    expect(BUTTON_REDESIGN_DISABLEMAXHEIGHT_STYLE.XXL_BIG).toEqual({
+      minHeight: 70,
+      maxHeight: 75,
+      gap: 7,
+      fontSize: 24,
+    });
+  });
+
+  test("should have XXXL bucket with correct values", () => {
+    expect(BUTTON_REDESIGN_DISABLEMAXHEIGHT_STYLE.XXXL).toEqual({
+      minHeight: 75,
+      maxHeight: 200,
+      gap: 8,
+      fontSize: 26,
+    });
+  });
+
+  test("should have no gaps in height coverage between buckets", () => {
+    const buckets = Object.keys(BUTTON_REDESIGN_DISABLEMAXHEIGHT_STYLE)
+      .map((key) => BUTTON_REDESIGN_DISABLEMAXHEIGHT_STYLE[key])
+      .filter((b) => b.minHeight !== undefined && b.maxHeight !== undefined)
+      .sort((a, b) => a.minHeight - b.minHeight);
+
+    for (let i = 1; i < buckets.length; i++) {
+      expect(buckets[i].minHeight).toBeLessThanOrEqual(
+        buckets[i - 1].maxHeight
+      );
+    }
+  });
+
+  test("should have continuous height coverage up to 200", () => {
+    const keys = Object.keys(BUTTON_REDESIGN_DISABLEMAXHEIGHT_STYLE);
+    const lastKey = keys[keys.length - 1];
+    expect(BUTTON_REDESIGN_DISABLEMAXHEIGHT_STYLE[lastKey].maxHeight).toBe(200);
+  });
+});

package/src/ui/buttons/styles/labels.js

@@ -72,9 +72,32 @@ export const labelStyle = `
   CLASS.BUTTON_LABEL
 } {
         font-family: PayPal Pro Book, system-ui, -apple-system, Roboto, "Segoe UI", Helvetica-Neue, Helvetica, Arial, sans-serif;
+        font-weight: 500;
     }
 
     .${CLASS.BUTTON_REBRAND}[data-funding-source=venmo] .${CLASS.BUTTON_LABEL} {
         font-family: Scto Grotesk A, system-ui, -apple-system, Roboto, "Segoe UI", Helvetica-Neue, Helvetica, Arial, sans-serif;
     }
+
+    /* targeting only credit and paylater buttons for the logo swap */
+    .${CLASS.BUTTON_REBRAND}[data-funding-source=credit],
+    .${CLASS.BUTTON_REBRAND}[data-funding-source=paylater] {
+        container-type: size;
+        container-name: paylater-credit-btn;
+    }
+
+    .${CLASS.BUTTON_REBRAND} .${CLASS.LOGO_PP_REBRAND} {
+        display: none;
+    }
+
+    /* At smaller sizes, swap out the full paypal watermark for the smaller pp monogram. At 150px-200px wide: 25-40px show wordmark, 45px triggers monogram. */
+    @container paylater-credit-btn ((max-width: 197px) and (min-height: 43px)) or ((max-width: 147px) and (max-height: 43px)) or ((max-width: 250px) and (min-height: 60px)) {
+        .${CLASS.BUTTON_LABEL} > .${CLASS.LOGO_REBRAND} {
+            display: none;
+        }
+
+        .${CLASS.BUTTON_LABEL} > .${CLASS.LOGO_PP_REBRAND} {
+            display: inline-block;
+        }
+    }
 `;