@paypal/checkout-components 5.0.412-alpha-84b7728.0 → 5.0.412

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

@@ -72,7 +72,6 @@ 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} {

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

@@ -18,8 +18,6 @@ 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";
 
@@ -181,23 +179,20 @@ const generateButtonSizeStyles = ({
                 .${CLASS.BUTTON}.${CLASS.BORDER_RADIUS} {
                   ${
                     borderRadius && isBorderRadiusNumber(borderRadius)
-                      ? `--btn-radius: ${borderRadius}px; border-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;
                 }
 
@@ -404,7 +399,7 @@ const generateDisableMaxHeightStyles = ({
       const { minHeight, maxHeight } = disableHeightStyle;
 
       return `
-            @container (min-height: ${minHeight}px) and (max-height: ${maxHeight}px) {
+            @media (min-height: ${minHeight}px) and (max-height: ${maxHeight}px) {
               .${CLASS.BUTTON_LABEL} {
                 gap: ${gap}px;
               }
@@ -459,11 +454,10 @@ const generateDisableMaxHeightStyles = ({
               }
 
               .${CLASS.BUTTON}.${CLASS.SHAPE}-${BUTTON_SHAPE.PILL} {
-                --btn-radius: ${pillBorderRadius}px;
                 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;
@@ -488,26 +482,21 @@ const generateDisableMaxHeightStyles = ({
 };
 
 const generateRebrandedDisableMaxHeightStyles = (): string => {
-  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 Object.keys(BUTTON_REDESIGN_STYLE)
+    .map((redesign_size) => {
+      const { gap, fontSize, minHeight, maxHeight } =
+        getResponsiveRebrandedStyleVariables({
+          redesign_size,
+        });
 
       return `
-        @container (min-height: ${minHeight}px) ${maxHeightQuery} {
+        @media (min-height: ${minHeight}px) and (max-height: ${maxHeight}px) {
           .${CLASS.BUTTON_REBRAND} > .${CLASS.BUTTON_LABEL} {
             gap: ${gap}px;
           }
-          .${CLASS.CONTAINER} .${CLASS.BUTTON_ROW} .${CLASS.BUTTON_REBRAND} .${CLASS.TEXT},
-          .${CLASS.CONTAINER} .${CLASS.BUTTON_ROW} .${CLASS.BUTTON_REBRAND} .${CLASS.SPACE} {
+          .${CLASS.CONTAINER} .${CLASS.BUTTON_ROW} .${CLASS.TEXT},
+          .${CLASS.CONTAINER} .${CLASS.BUTTON_ROW} .${CLASS.SPACE} {
             font-size: ${fontSize}px;
-            line-height: 1.2;
-            margin: 0;
           }
         }
       `;
@@ -528,10 +517,8 @@ const generateRebrandedButtonSizeStyles = ({
   borderRadius?: ?number,
   shouldApplyRebrandedStyles?: boolean,
 |}): string => {
-  const redesignSizeKeys = Object.keys(BUTTON_REDESIGN_STYLE);
-  return redesignSizeKeys
-    .map((redesignSize, sizeIndex) => {
-      const isLastSizeBucket = sizeIndex === redesignSizeKeys.length - 1;
+  return Object.keys(BUTTON_REDESIGN_STYLE)
+    .map((redesign_size) => {
       const {
         buttonHeight,
         pillBorderRadius,
@@ -545,13 +532,9 @@ const generateRebrandedButtonSizeStyles = ({
         minDualWidth,
       } = getResponsiveRebrandedStyleVariables({
         height,
-        redesignSize,
+        redesign_size,
       });
 
-      const maxWidthQuery = isLastSizeBucket
-        ? ""
-        : `and (max-width: ${maxWidth}px)`;
-
       const widthBasedStyles = `
         @media only screen and (min-width: ${minWidth}px) {
           .${CLASS.CONTAINER} {
@@ -573,9 +556,7 @@ const generateRebrandedButtonSizeStyles = ({
           .${CLASS.BUTTON_REBRAND} > .${CLASS.BUTTON_LABEL} {
               margin: 0px 4vw;
               box-sizing: border-box;
-              height: ${Math.round(
-                buttonHeight * REBRAND_LABEL_HEIGHT_RATIO
-              )}px;
+              height: ${buttonHeight * 0.76}px;
           }
 
           .${CLASS.BUTTON_REBRAND}.${CLASS.NUMBER}-${BUTTON_NUMBER.MULTIPLE} .${
@@ -584,8 +565,20 @@ const generateRebrandedButtonSizeStyles = ({
               gap: ${gap}px;
           }
 
-          .${CLASS.TAGLINE} .${CLASS.TEXT} {
-              font-size: ${minWidth >= 500 ? 14 : 12}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.BUTTON_ROW}.${CLASS.LAYOUT}-${BUTTON_LAYOUT.VERTICAL}.${
@@ -604,20 +597,7 @@ const generateRebrandedButtonSizeStyles = ({
               margin-bottom: 0;
           }
         }
-
-        @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
@@ -692,18 +672,17 @@ const generateRebrandedButtonSizeStyles = ({
        `;
 
       const heightBasedStyles = `
-        @container (min-height: ${minHeight}px) and (max-height: ${maxHeight}px) {
+        @media only screen and (min-height: ${minHeight}px) and (max-height: ${maxHeight}px) {
           .${CLASS.BUTTON_REBRAND} > .${CLASS.BUTTON_LABEL} {
               gap: ${gap}px;
           }
 
-          .${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} {
+          .${CLASS.CONTAINER} .${CLASS.BUTTON_ROW} .${CLASS.TEXT}, 
+          .${CLASS.CONTAINER} .${CLASS.BUTTON_ROW} .${CLASS.SPACE} {
               font-size: ${fontSize}px;
+          }
+
+          .${CLASS.BUTTON_ROW} .${CLASS.BUTTON_REBRAND} .${CLASS.TEXT} {
               line-height: 1.2;
               margin: 0;
           }
@@ -758,23 +737,20 @@ const generateRebrandedButtonSizeStyles = ({
           .${CLASS.BUTTON}.${CLASS.BORDER_RADIUS} {
             ${
               borderRadius && isBorderRadiusNumber(borderRadius)
-                ? `--btn-radius: ${borderRadius}px; border-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;
           }
 
@@ -893,16 +869,14 @@ export function buttonResponsiveStyle({
     .${CLASS.BUTTON}.${CLASS.BORDER_RADIUS} {
       ${
         borderRadius && isBorderRadiusNumber(borderRadius)
-          ? `--btn-radius: ${borderRadius}px; border-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;
     }
 
@@ -928,10 +902,6 @@ export function buttonResponsiveStyle({
     .${CLASS.CARD} {
         display: inline-block;
         height: 100%;
-    }
-
-    .${CLASS.BUTTON_ROW} {
-        container-type: size;
     }`;
 
   const rebrandedStyles = shouldApplyRebrandedStyles

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

@@ -7,7 +7,6 @@ import {
   BUTTON_DISABLE_MAX_HEIGHT_STYLE,
   BUTTON_SIZE_STYLE,
   BUTTON_REDESIGN_STYLE,
-  REBRAND_LABEL_HEIGHT_RATIO,
 } from "../config";
 import {
   BUTTON_SIZE,
@@ -33,7 +32,7 @@ function getLabelHeight({
   let labelHeight = max(roundUp(perc(height, labelPercPercentage) + 5, 2), 12);
 
   if (shouldApplyRebrandedStyles) {
-    labelHeight = roundUp(perc(height, REBRAND_LABEL_HEIGHT_RATIO * 100), 1);
+    labelHeight = roundUp(perc(height, 76), 1);
   }
 
   return parseInt(labelHeight, 10);
@@ -142,10 +141,7 @@ export function getResponsiveStyleVariables({
   const pillBorderRadius = Math.ceil(buttonHeight / 2);
 
   if (shouldApplyRebrandedStyles) {
-    labelHeight = roundUp(
-      perc(buttonHeight, REBRAND_LABEL_HEIGHT_RATIO * 100),
-      1
-    );
+    labelHeight = roundUp(perc(buttonHeight, 76), 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;
@@ -169,12 +165,12 @@ export function getResponsiveStyleVariables({
 
 export function getResponsiveRebrandedStyleVariables({
   height,
-  redesignSize,
+  redesign_size,
 }: {|
   height?: ?number,
-  redesignSize: $Values<typeof BUTTON_REDESIGN_SIZE>,
+  redesign_size: $Values<typeof BUTTON_REDESIGN_SIZE>,
 |}): Object {
-  const style = BUTTON_REDESIGN_STYLE[redesignSize];
+  const style = BUTTON_REDESIGN_STYLE[redesign_size];
   const {
     minHeight,
     maxHeight,

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

@@ -398,7 +398,7 @@ const expectedRebrandDisableMaxHeightStylesTiny = {
   buttonHeight: 25,
   disableHeightStyle:
     BUTTON_DISABLE_MAX_HEIGHT_STYLE[BUTTON_DISABLE_MAX_HEIGHT_SIZE.TINY],
-  labelHeight: 13,
+  labelHeight: 19,
   fontSize: 10,
   marginTop: 1,
   pillBorderRadius: 13,
@@ -412,7 +412,7 @@ const expectedRebrandDisableMaxHeightStylesSmall = {
   buttonHeight: 30,
   disableHeightStyle:
     BUTTON_DISABLE_MAX_HEIGHT_STYLE[BUTTON_DISABLE_MAX_HEIGHT_SIZE.SMALL],
-  labelHeight: 15,
+  labelHeight: 23,
   fontSize: 11,
   marginTop: 1,
   pillBorderRadius: 15,
@@ -428,7 +428,7 @@ const expectedRebrandDisableMaxHeightStylesMediumSmall = {
     BUTTON_DISABLE_MAX_HEIGHT_STYLE[
       BUTTON_DISABLE_MAX_HEIGHT_SIZE.MEDIUM_SMALL
     ],
-  labelHeight: 18,
+  labelHeight: 27,
   fontSize: 13,
   marginTop: 1,
   pillBorderRadius: 18,
@@ -442,7 +442,7 @@ const expectedRebrandDisableMaxHeightStylesMediumBig = {
   buttonHeight: 40,
   disableHeightStyle:
     BUTTON_DISABLE_MAX_HEIGHT_STYLE[BUTTON_DISABLE_MAX_HEIGHT_SIZE.MEDIUM_BIG],
-  labelHeight: 20,
+  labelHeight: 30,
   fontSize: 14,
   marginTop: 1,
   pillBorderRadius: 20,
@@ -456,7 +456,7 @@ const expectedRebrandDisableMaxHeightStylesLargeSmall = {
   buttonHeight: 45,
   disableHeightStyle:
     BUTTON_DISABLE_MAX_HEIGHT_STYLE[BUTTON_DISABLE_MAX_HEIGHT_SIZE.LARGE_SMALL],
-  labelHeight: 23,
+  labelHeight: 34,
   fontSize: 16,
   marginTop: 2,
   pillBorderRadius: 23,
@@ -470,7 +470,7 @@ const expectedRebrandDisableMaxHeightStylesLargeBig = {
   buttonHeight: 50,
   disableHeightStyle:
     BUTTON_DISABLE_MAX_HEIGHT_STYLE[BUTTON_DISABLE_MAX_HEIGHT_SIZE.LARGE_BIG],
-  labelHeight: 25,
+  labelHeight: 38,
   fontSize: 18,
   marginTop: 2,
   pillBorderRadius: 25,
@@ -484,7 +484,7 @@ const expectedRebrandDisableMaxHeightStylesXL = {
   buttonHeight: 55,
   disableHeightStyle:
     BUTTON_DISABLE_MAX_HEIGHT_STYLE[BUTTON_DISABLE_MAX_HEIGHT_SIZE.XL],
-  labelHeight: 28,
+  labelHeight: 42,
   fontSize: 20,
   marginTop: 2,
   pillBorderRadius: 28,
@@ -498,7 +498,7 @@ const expectedRebrandDisableMaxHeightStylesXXL = {
   buttonHeight: 65,
   disableHeightStyle:
     BUTTON_DISABLE_MAX_HEIGHT_STYLE[BUTTON_DISABLE_MAX_HEIGHT_SIZE.XXL],
-  labelHeight: 33,
+  labelHeight: 49,
   fontSize: 23,
   marginTop: 2,
   pillBorderRadius: 33,
@@ -512,7 +512,7 @@ const expectedRebrandDisableMaxHeightStylesXXXL = {
   buttonHeight: 75,
   disableHeightStyle:
     BUTTON_DISABLE_MAX_HEIGHT_STYLE[BUTTON_DISABLE_MAX_HEIGHT_SIZE.XXXL],
-  labelHeight: 38,
+  labelHeight: 57,
   fontSize: 27,
   marginTop: 3,
   pillBorderRadius: 38,
@@ -532,7 +532,7 @@ const expectedRebrandedResponsiveStylesExtraSmall = {
   minWidth: 50,
   minDualWidth: 300,
   maxWidth: 75,
-  fontSize: 10,
+  fontSize: 12,
 };
 
 const expectedRebrandedResponsiveStylesTiny = {
@@ -546,7 +546,7 @@ const expectedRebrandedResponsiveStylesTiny = {
   minWidth: 75,
   minDualWidth: 300,
   maxWidth: 200,
-  fontSize: 10,
+  fontSize: 12,
 };
 
 const expectedRebrandedResponsiveStylesSmall = {
@@ -560,7 +560,7 @@ const expectedRebrandedResponsiveStylesSmall = {
   minWidth: 200,
   minDualWidth: 300,
   maxWidth: 250,
-  fontSize: 12,
+  fontSize: 14,
 };
 
 const expectedRebrandedResponsiveStylesMediumSmall = {
@@ -574,7 +574,7 @@ const expectedRebrandedResponsiveStylesMediumSmall = {
   minWidth: 250,
   minDualWidth: 300,
   maxWidth: 300,
-  fontSize: 14,
+  fontSize: 16,
 };
 
 const expectedRebrandedResponsiveStylesMediumBig = {
@@ -588,7 +588,7 @@ const expectedRebrandedResponsiveStylesMediumBig = {
   minWidth: 300,
   minDualWidth: 300,
   maxWidth: 350,
-  fontSize: 14,
+  fontSize: 16,
 };
 
 const expectedRebrandedResponsiveStylesLargeSmall = {
@@ -602,7 +602,7 @@ const expectedRebrandedResponsiveStylesLargeSmall = {
   minWidth: 350,
   minDualWidth: 300,
   maxWidth: 425,
-  fontSize: 16,
+  fontSize: 18,
 };
 
 const expectedRebrandedResponsiveStylesLargeBig = {
@@ -616,7 +616,7 @@ const expectedRebrandedResponsiveStylesLargeBig = {
   minWidth: 425,
   minDualWidth: 300,
   maxWidth: 500,
-  fontSize: 18,
+  fontSize: 20,
 };
 
 const expectedRebrandedResponsiveStylesXlSmall = {
@@ -629,8 +629,36 @@ const expectedRebrandedResponsiveStylesXlSmall = {
   maxHeight: 60,
   minWidth: 500,
   minDualWidth: 300,
+  maxWidth: 550,
+  fontSize: 22,
+};
+
+const expectedRebrandedResponsiveStylesXlBig = {
+  style: BUTTON_REDESIGN_STYLE[BUTTON_REDESIGN_SIZE.XL_BIG],
+  buttonHeight: 55,
+  pillBorderRadius: 28,
+  gap: 7,
+  defaultHeight: 55,
+  minHeight: 60,
+  maxHeight: 65,
+  minWidth: 550,
+  minDualWidth: 300,
+  maxWidth: 650,
+  fontSize: 24,
+};
+
+const expectedRebrandedResponsiveStylesXXL = {
+  style: BUTTON_REDESIGN_STYLE[BUTTON_REDESIGN_SIZE.XXL],
+  buttonHeight: 55,
+  pillBorderRadius: 28,
+  gap: 7,
+  defaultHeight: 55,
+  minHeight: 65,
+  maxHeight: 100,
+  minWidth: 650,
+  minDualWidth: 300,
   maxWidth: 750,
-  fontSize: 18,
+  fontSize: 26,
 };
 
 describe("test responsive style variables for legacy", () => {
@@ -756,12 +784,20 @@ describe("test responsive style variables for rebranded buttons", () => {
       input: BUTTON_REDESIGN_SIZE.XL_SMALL,
       expected: expectedRebrandedResponsiveStylesXlSmall,
     },
+    {
+      input: BUTTON_REDESIGN_SIZE.XL_BIG,
+      expected: expectedRebrandedResponsiveStylesXlBig,
+    },
+    {
+      input: BUTTON_REDESIGN_SIZE.XXL,
+      expected: expectedRebrandedResponsiveStylesXXL,
+    },
   ])(
     `should return rebrand responsive styles for size $input`,
     ({ input, expected }) => {
       expect(
         getResponsiveRebrandedStyleVariables({
-          redesignSize: input,
+          redesign_size: input,
         })
       ).toEqual(expected);
     }

package/src/ui/buttons/tagline.jsx

@@ -42,7 +42,9 @@ export function TagLine({
     <div class={CLASS.TAGLINE}>
       {tagline ? (
         <Fragment>
-          {tagline.Component ? <tagline.Component /> : tagline.text}
+          <span>
+            {tagline.Component ? <tagline.Component /> : tagline.text}
+          </span>
           {tagline.tracking && tagline.tracking.impression && (
             <TrackingBeacon url={tagline.tracking.impression} nonce={nonce} />
           )}

package/src/ui/saved-payment-methods/index.js

@@ -0,0 +1,3 @@
+/* @flow */
+
+export * from "./template";