@paypal/checkout-components 5.0.412 → 5.0.414

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;
+        }
+    }
 `;

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

@@ -18,6 +18,8 @@ import {
   BUTTON_RELATIVE_STYLE,
   BUTTON_DISABLE_MAX_HEIGHT_STYLE,
   BUTTON_REDESIGN_STYLE,
+  BUTTON_REDESIGN_DISABLEMAXHEIGHT_STYLE,
+  REBRAND_LABEL_HEIGHT_RATIO,
 } from "../config";
 import { isBorderRadiusNumber } from "../util";
 
@@ -179,20 +181,23 @@ const generateButtonSizeStyles = ({
                 .${CLASS.BUTTON}.${CLASS.BORDER_RADIUS} {
                   ${
                     borderRadius && isBorderRadiusNumber(borderRadius)
-                      ? `border-radius: ${borderRadius}px`
+                      ? `--btn-radius: ${borderRadius}px; border-radius: ${borderRadius}px`
                       : ""
                   }
                 }
 
                 .${CLASS.BUTTON}.${CLASS.SHAPE}-${BUTTON_SHAPE.SHARP} {
+                  --btn-radius: 0px;
                   border-radius: 0px;
                 }
 
                 .${CLASS.BUTTON}.${CLASS.SHAPE}-${BUTTON_SHAPE.RECT} {
+                    --btn-radius: 4px;
                     border-radius: 4px;
                 }
 
                 .${CLASS.BUTTON}.${CLASS.SHAPE}-${BUTTON_SHAPE.PILL} {
+                    --btn-radius: ${pillBorderRadius}px;
                     border-radius: ${pillBorderRadius}px;
                 }
 
@@ -399,7 +404,7 @@ const generateDisableMaxHeightStyles = ({
       const { minHeight, maxHeight } = disableHeightStyle;
 
       return `
-            @media (min-height: ${minHeight}px) and (max-height: ${maxHeight}px) {
+            @container (min-height: ${minHeight}px) and (max-height: ${maxHeight}px) {
               .${CLASS.BUTTON_LABEL} {
                 gap: ${gap}px;
               }
@@ -457,7 +462,7 @@ const generateDisableMaxHeightStyles = ({
                 border-radius: ${pillBorderRadius}px;
               }
 
-              .${CLASS.BUTTON_ROW}.${CLASS.SHAPE}-${BUTTON_SHAPE.PILL} 
+              .${CLASS.BUTTON_ROW}.${CLASS.SHAPE}-${BUTTON_SHAPE.PILL}
               .menu-button {
                 border-top-right-radius: ${pillBorderRadius}px;
                 border-bottom-right-radius: ${pillBorderRadius}px;
@@ -482,21 +487,26 @@ const generateDisableMaxHeightStyles = ({
 };
 
 const generateRebrandedDisableMaxHeightStyles = (): string => {
-  return Object.keys(BUTTON_REDESIGN_STYLE)
-    .map((redesign_size) => {
-      const { gap, fontSize, minHeight, maxHeight } =
-        getResponsiveRebrandedStyleVariables({
-          redesign_size,
-        });
+  const sizeKeys = Object.keys(BUTTON_REDESIGN_DISABLEMAXHEIGHT_STYLE);
+  return sizeKeys
+    .map((redesignSize, sizeIndex) => {
+      const isLastSizeBucket = sizeIndex === sizeKeys.length - 1;
+      const style = BUTTON_REDESIGN_DISABLEMAXHEIGHT_STYLE[redesignSize];
+      const { gap, fontSize, minHeight, maxHeight } = style;
+      const maxHeightQuery = isLastSizeBucket
+        ? ""
+        : `and (max-height: ${maxHeight}px)`;
 
       return `
-        @media (min-height: ${minHeight}px) and (max-height: ${maxHeight}px) {
+        @container (min-height: ${minHeight}px) ${maxHeightQuery} {
           .${CLASS.BUTTON_REBRAND} > .${CLASS.BUTTON_LABEL} {
             gap: ${gap}px;
           }
-          .${CLASS.CONTAINER} .${CLASS.BUTTON_ROW} .${CLASS.TEXT},
-          .${CLASS.CONTAINER} .${CLASS.BUTTON_ROW} .${CLASS.SPACE} {
+          .${CLASS.CONTAINER} .${CLASS.BUTTON_ROW} .${CLASS.BUTTON_REBRAND} .${CLASS.TEXT},
+          .${CLASS.CONTAINER} .${CLASS.BUTTON_ROW} .${CLASS.BUTTON_REBRAND} .${CLASS.SPACE} {
             font-size: ${fontSize}px;
+            line-height: 1.2;
+            margin: 0;
           }
         }
       `;
@@ -517,11 +527,12 @@ const generateRebrandedButtonSizeStyles = ({
   borderRadius?: ?number,
   shouldApplyRebrandedStyles?: boolean,
 |}): string => {
-  return Object.keys(BUTTON_REDESIGN_STYLE)
-    .map((redesign_size) => {
+  const redesignSizeKeys = Object.keys(BUTTON_REDESIGN_STYLE);
+  return redesignSizeKeys
+    .map((redesignSize, sizeIndex) => {
+      const isLastSizeBucket = sizeIndex === redesignSizeKeys.length - 1;
       const {
         buttonHeight,
-        pillBorderRadius,
         gap,
         fontSize,
         defaultHeight,
@@ -532,9 +543,13 @@ const generateRebrandedButtonSizeStyles = ({
         minDualWidth,
       } = getResponsiveRebrandedStyleVariables({
         height,
-        redesign_size,
+        redesignSize,
       });
 
+      const maxWidthQuery = isLastSizeBucket
+        ? ""
+        : `and (max-width: ${maxWidth}px)`;
+
       const widthBasedStyles = `
         @media only screen and (min-width: ${minWidth}px) {
           .${CLASS.CONTAINER} {
@@ -556,7 +571,9 @@ const generateRebrandedButtonSizeStyles = ({
           .${CLASS.BUTTON_REBRAND} > .${CLASS.BUTTON_LABEL} {
               margin: 0px 4vw;
               box-sizing: border-box;
-              height: ${buttonHeight * 0.76}px;
+              height: ${Math.round(
+                buttonHeight * REBRAND_LABEL_HEIGHT_RATIO
+              )}px;
           }
 
           .${CLASS.BUTTON_REBRAND}.${CLASS.NUMBER}-${BUTTON_NUMBER.MULTIPLE} .${
@@ -565,20 +582,8 @@ const generateRebrandedButtonSizeStyles = ({
               gap: ${gap}px;
           }
 
-          .${CLASS.CONTAINER} .${CLASS.BUTTON_ROW}.${CLASS.NUMBER}-${
-        BUTTON_NUMBER.MULTIPLE
-      } .${CLASS.TEXT}, 
-          .${CLASS.CONTAINER} .${CLASS.BUTTON_ROW}.${CLASS.NUMBER}-${
-        BUTTON_NUMBER.MULTIPLE
-      } .${CLASS.SPACE} {
-              font-size: ${fontSize}px;
-          }
-
-          .${CLASS.BUTTON_ROW}.${CLASS.NUMBER}-${BUTTON_NUMBER.MULTIPLE} .${
-        CLASS.BUTTON_REBRAND
-      } .${CLASS.TEXT} {
-              line-height: 1.2;
-              margin: 0;
+          .${CLASS.TAGLINE} .${CLASS.TEXT} {
+              font-size: ${minWidth >= 500 ? 14 : 12}px;
           }
 
           .${CLASS.BUTTON_ROW}.${CLASS.LAYOUT}-${BUTTON_LAYOUT.VERTICAL}.${
@@ -596,8 +601,73 @@ const generateRebrandedButtonSizeStyles = ({
       }-${BUTTON_NUMBER.MULTIPLE}:last-child {
               margin-bottom: 0;
           }
+
+          .${CLASS.BUTTON}.${CLASS.BORDER_RADIUS} {
+            ${
+              borderRadius && isBorderRadiusNumber(borderRadius)
+                ? `--btn-radius: ${borderRadius}px; border-radius: ${borderRadius}px`
+                : ""
+            }
+          }
+
+          .${CLASS.BUTTON}.${CLASS.SHAPE}-${BUTTON_SHAPE.SHARP} {
+            --btn-radius: 0px;
+            border-radius: 0px;
+          }
+
+          .${CLASS.BUTTON}.${CLASS.SHAPE}-${BUTTON_SHAPE.RECT} {
+              --btn-radius: 4px;
+              border-radius: 4px;
+          }
+
+          .${CLASS.BUTTON}.${CLASS.SHAPE}-${BUTTON_SHAPE.PILL} {
+              --btn-radius: 9999px;
+              border-radius: 9999px;
+          }
+
+          .${CLASS.BUTTON_ROW}.${CLASS.BORDER_RADIUS} .menu-button {
+            ${
+              borderRadius && isBorderRadiusNumber(borderRadius)
+                ? `border-top-right-radius: ${borderRadius}px; border-bottom-right-radius: ${borderRadius}px`
+                : ""
+            }
+          }
+
+          .${CLASS.BUTTON_ROW}.${CLASS.SHAPE}-${
+        BUTTON_SHAPE.SHARP
+      } .menu-button {
+              border-top-right-radius: 0px;
+              border-bottom-right-radius: 0px;
+          }
+
+          .${CLASS.BUTTON_ROW}.${CLASS.SHAPE}-${
+        BUTTON_SHAPE.RECT
+      } .menu-button {
+              border-top-right-radius: 4px;
+              border-bottom-right-radius: 4px;
+          }
+
+          .${CLASS.BUTTON_ROW}.${CLASS.SHAPE}-${
+        BUTTON_SHAPE.PILL
+      } .menu-button {
+              border-top-right-radius: 9999px;
+              border-bottom-right-radius: 9999px;
+          }
         }
-      
+
+        @media only screen and (min-width: ${minWidth}px) ${maxWidthQuery} {
+          .${CLASS.CONTAINER} .${CLASS.BUTTON_ROW} .${CLASS.BUTTON_REBRAND} .${
+        CLASS.TEXT
+      },
+          .${CLASS.CONTAINER} .${CLASS.BUTTON_ROW} .${CLASS.BUTTON_REBRAND} .${
+        CLASS.SPACE
+      } {
+              font-size: ${fontSize}px;
+              line-height: 1.2;
+              margin: 0;
+          }
+        }
+
         @media only screen and (min-width: ${minWidth}px) and (max-width: ${minDualWidth}px) {
           .${CLASS.BUTTON_ROW}.${CLASS.LAYOUT}-${BUTTON_LAYOUT.HORIZONTAL}.${
         CLASS.NUMBER
@@ -672,17 +742,18 @@ const generateRebrandedButtonSizeStyles = ({
        `;
 
       const heightBasedStyles = `
-        @media only screen and (min-height: ${minHeight}px) and (max-height: ${maxHeight}px) {
+        @container (min-height: ${minHeight}px) and (max-height: ${maxHeight}px) {
           .${CLASS.BUTTON_REBRAND} > .${CLASS.BUTTON_LABEL} {
               gap: ${gap}px;
           }
 
-          .${CLASS.CONTAINER} .${CLASS.BUTTON_ROW} .${CLASS.TEXT}, 
-          .${CLASS.CONTAINER} .${CLASS.BUTTON_ROW} .${CLASS.SPACE} {
+          .${CLASS.CONTAINER} .${CLASS.BUTTON_ROW} .${CLASS.BUTTON_REBRAND}.${
+        CLASS.BUTTON_REBRAND
+      } .${CLASS.TEXT},
+          .${CLASS.CONTAINER} .${CLASS.BUTTON_ROW} .${CLASS.BUTTON_REBRAND}.${
+        CLASS.BUTTON_REBRAND
+      } .${CLASS.SPACE} {
               font-size: ${fontSize}px;
-          }
-
-          .${CLASS.BUTTON_ROW} .${CLASS.BUTTON_REBRAND} .${CLASS.TEXT} {
               line-height: 1.2;
               margin: 0;
           }
@@ -733,56 +804,7 @@ const generateRebrandedButtonSizeStyles = ({
       } .${CLASS.SPACE} {
               line-height: ${perc(buttonHeight, 50) + 5}px;
           }
-          
-          .${CLASS.BUTTON}.${CLASS.BORDER_RADIUS} {
-            ${
-              borderRadius && isBorderRadiusNumber(borderRadius)
-                ? `border-radius: ${borderRadius}px`
-                : ""
-            }
-          }
-
-          .${CLASS.BUTTON}.${CLASS.SHAPE}-${BUTTON_SHAPE.SHARP} {
-            border-radius: 0px;
-          }
 
-          .${CLASS.BUTTON}.${CLASS.SHAPE}-${BUTTON_SHAPE.RECT} {
-              border-radius: 4px;
-          }
-
-          .${CLASS.BUTTON}.${CLASS.SHAPE}-${BUTTON_SHAPE.PILL} {
-              border-radius: ${pillBorderRadius}px;
-          }
-
-          .${CLASS.BUTTON_ROW}.${CLASS.BORDER_RADIUS} .menu-button {
-            ${
-              borderRadius && isBorderRadiusNumber(borderRadius)
-                ? `border-top-right-radius: ${borderRadius}px; border-bottom-right-radius: ${borderRadius}px`
-                : ""
-            }
-          }
-
-          .${CLASS.BUTTON_ROW}.${CLASS.SHAPE}-${
-        BUTTON_SHAPE.SHARP
-      } .menu-button {
-              border-top-right-radius: 0px;
-              border-bottom-right-radius: 0px;
-          }
-
-          .${CLASS.BUTTON_ROW}.${CLASS.SHAPE}-${
-        BUTTON_SHAPE.RECT
-      } .menu-button {
-              border-top-right-radius: 4px;
-              border-bottom-right-radius: 4px;
-          }
-
-          .${CLASS.BUTTON_ROW}.${CLASS.SHAPE}-${
-        BUTTON_SHAPE.PILL
-      } .menu-button {
-              border-top-right-radius: ${pillBorderRadius}px;
-              border-bottom-right-radius: ${pillBorderRadius}px;
-          }
-          
           .${CLASS.TAGLINE} .${CLASS.TEXT} {
               height: ${perc(buttonHeight, BUTTON_RELATIVE_STYLE.TAGLINE)}px;
               line-height: ${perc(
@@ -869,16 +891,22 @@ export function buttonResponsiveStyle({
     .${CLASS.BUTTON}.${CLASS.BORDER_RADIUS} {
       ${
         borderRadius && isBorderRadiusNumber(borderRadius)
-          ? `border-radius: ${borderRadius}px`
+          ? `--btn-radius: ${borderRadius}px; border-radius: ${borderRadius}px`
           : ""
       };
     }
     .${CLASS.BUTTON}.${CLASS.SHAPE}-${BUTTON_SHAPE.SHARP} {
+        --btn-radius: 0px;
         border-radius: 0px;
     }
     .${CLASS.BUTTON}.${CLASS.SHAPE}-${BUTTON_SHAPE.RECT} {
+        --btn-radius: 4px;
         border-radius: 4px;
     }
+    .${CLASS.BUTTON}.${CLASS.SHAPE}-${BUTTON_SHAPE.PILL} {
+        --btn-radius: 9999px;
+        border-radius: 9999px;
+    }
 
     // menu button - border radius
     .${CLASS.BUTTON_ROW}.${CLASS.BORDER_RADIUS} .menu-button {
@@ -898,10 +926,18 @@ export function buttonResponsiveStyle({
         border-top-right-radius: 4px;
         border-bottom-right-radius: 4px;
     }
+    .${CLASS.BUTTON_ROW}.${CLASS.SHAPE}-${BUTTON_SHAPE.PILL} .menu-button {
+        border-top-right-radius: 9999px;
+        border-bottom-right-radius: 9999px;
+    }
 
     .${CLASS.CARD} {
         display: inline-block;
         height: 100%;
+    }
+
+    .${CLASS.BUTTON_ROW} {
+        container-type: size;
     }`;
 
   const rebrandedStyles = shouldApplyRebrandedStyles

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

@@ -7,6 +7,7 @@ import {
   BUTTON_DISABLE_MAX_HEIGHT_STYLE,
   BUTTON_SIZE_STYLE,
   BUTTON_REDESIGN_STYLE,
+  REBRAND_LABEL_HEIGHT_RATIO,
 } from "../config";
 import {
   BUTTON_SIZE,
@@ -32,7 +33,7 @@ function getLabelHeight({
   let labelHeight = max(roundUp(perc(height, labelPercPercentage) + 5, 2), 12);
 
   if (shouldApplyRebrandedStyles) {
-    labelHeight = roundUp(perc(height, 76), 1);
+    labelHeight = roundUp(perc(height, REBRAND_LABEL_HEIGHT_RATIO * 100), 1);
   }
 
   return parseInt(labelHeight, 10);
@@ -141,7 +142,10 @@ export function getResponsiveStyleVariables({
   const pillBorderRadius = Math.ceil(buttonHeight / 2);
 
   if (shouldApplyRebrandedStyles) {
-    labelHeight = roundUp(perc(buttonHeight, 76), 1);
+    labelHeight = roundUp(
+      perc(buttonHeight, REBRAND_LABEL_HEIGHT_RATIO * 100),
+      1
+    );
     // smallerLabelHeight gets triggered at widths < 320px
     // We will need to investigate why the labels need to get significantly smaller at this breakpoint
     smallerLabelHeight = labelHeight;
@@ -165,12 +169,12 @@ export function getResponsiveStyleVariables({
 
 export function getResponsiveRebrandedStyleVariables({
   height,
-  redesign_size,
+  redesignSize,
 }: {|
   height?: ?number,
-  redesign_size: $Values<typeof BUTTON_REDESIGN_SIZE>,
+  redesignSize: $Values<typeof BUTTON_REDESIGN_SIZE>,
 |}): Object {
-  const style = BUTTON_REDESIGN_STYLE[redesign_size];
+  const style = BUTTON_REDESIGN_STYLE[redesignSize];
   const {
     minHeight,
     maxHeight,
@@ -182,7 +186,6 @@ export function getResponsiveRebrandedStyleVariables({
   } = style;
 
   const buttonHeight = height || defaultHeight;
-  const pillBorderRadius = Math.ceil(buttonHeight / 2);
 
   const minDualWidth = Math.max(
     Math.round(
@@ -194,7 +197,6 @@ export function getResponsiveRebrandedStyleVariables({
   const styleVariables = {
     style,
     buttonHeight,
-    pillBorderRadius,
     gap,
     defaultHeight,
     minHeight,