@paypal/checkout-components 5.0.378 → 5.0.379-alpha-84027e6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@paypal/checkout-components",
-  "version": "5.0.378",
+  "version": "5.0.379-alpha-84027e6.0",
   "description": "PayPal Checkout components, for integrating checkout products.",
   "main": "index.js",
   "scripts": {

package/src/constants/button.js

@@ -44,6 +44,19 @@ export const BUTTON_SIZE = {
   RESPONSIVE: ("responsive": "responsive"),
 };
 
+export const BUTTON_REDESIGN_SIZE = {
+  EXTRA_SMALL: ("extraSmall": "extraSmall"),
+  TINY: ("tiny": "tiny"),
+  SMALL: ("small": "small"),
+  MEDIUM_SMALL: ("mediumSmall": "mediumSmall"),
+  MEDIUM_BIG: ("mediumBig": "mediumBig"),
+  LARGE_SMALL: ("largeSmall": "largeSmall"),
+  LARGE_BIG: ("largeBig": "largeBig"),
+  XL_SMALL: ("xlSmall": "xlSmall"),
+  XL_BIG: ("xlBig": "xlBig"),
+  XXL: ("xxl": "xxl"),
+};
+
 export const BUTTON_DISABLE_MAX_HEIGHT_SIZE = {
   TINY: ("tiny": "tiny"),
   SMALL: ("small": "small"),

package/src/ui/buttons/config.js

@@ -5,6 +5,7 @@ import {
   BUTTON_SIZE,
   BUTTON_DISABLE_MAX_HEIGHT_SIZE,
   BUTTON_LAYOUT,
+  BUTTON_REDESIGN_SIZE,
 } from "../../constants";
 
 export const MINIMUM_SIZE: {|
@@ -45,6 +46,19 @@ type ButtonDisableMaxHeightStyleMap = {
   |},
 };
 
+type ButtonRedesignStyleMap = {
+  [$Values<typeof BUTTON_REDESIGN_SIZE>]: {|
+    defaultHeight: number,
+    minHeight: number,
+    maxHeight: number,
+    minWidth: number,
+    maxWidth: number,
+    gap?: number,
+    fontSize?: number,
+    padding?: number,
+  |},
+};
+
 export const BUTTON_SIZE_STYLE: ButtonStyleMap = {
   [BUTTON_SIZE.TINY]: {
     defaultWidth: 75,
@@ -147,3 +161,105 @@ export const BUTTON_DISABLE_MAX_HEIGHT_STYLE: ButtonDisableMaxHeightStyleMap = {
     maxHeight: 200,
   },
 };
+
+export const BUTTON_REDESIGN_STYLE: ButtonRedesignStyleMap = {
+  [BUTTON_REDESIGN_SIZE.EXTRA_SMALL]: {
+    defaultHeight: 20,
+    minHeight: 20,
+    maxHeight: 30,
+    minWidth: 50,
+    maxWidth: 75,
+    gap: 3,
+    fontSize: 12,
+  },
+
+  [BUTTON_REDESIGN_SIZE.TINY]: {
+    defaultHeight: 25,
+    minHeight: 25,
+    maxHeight: 30,
+    minWidth: 75,
+    maxWidth: 200,
+    gap: 3,
+    fontSize: 12,
+  },
+
+  [BUTTON_REDESIGN_SIZE.SMALL]: {
+    defaultHeight: 30,
+    minHeight: 30,
+    maxHeight: 35,
+    minWidth: 200,
+    maxWidth: 250,
+    gap: 3,
+    fontSize: 14,
+  },
+
+  [BUTTON_REDESIGN_SIZE.MEDIUM_SMALL]: {
+    defaultHeight: 35,
+    minHeight: 35,
+    maxHeight: 40,
+    minWidth: 250,
+    maxWidth: 300,
+    gap: 4,
+    fontSize: 16,
+  },
+
+  [BUTTON_REDESIGN_SIZE.MEDIUM_BIG]: {
+    defaultHeight: 40,
+    minHeight: 40,
+    maxHeight: 44,
+    minWidth: 300,
+    maxWidth: 350,
+    gap: 4,
+    fontSize: 16,
+  },
+
+  [BUTTON_REDESIGN_SIZE.LARGE_SMALL]: {
+    defaultHeight: 45,
+    minHeight: 45,
+    maxHeight: 50,
+    minWidth: 350,
+    maxWidth: 425,
+    gap: 5,
+    fontSize: 18,
+  },
+
+  [BUTTON_REDESIGN_SIZE.LARGE_BIG]: {
+    defaultHeight: 50,
+    minHeight: 50,
+    maxHeight: 55,
+    minWidth: 425,
+    maxWidth: 500,
+    gap: 5,
+    fontSize: 20,
+  },
+
+  [BUTTON_REDESIGN_SIZE.XL_SMALL]: {
+    defaultHeight: 55,
+    minHeight: 55,
+    maxHeight: 60,
+    minWidth: 500,
+    maxWidth: 550,
+    gap: 6,
+    fontSize: 22,
+  },
+
+  [BUTTON_REDESIGN_SIZE.XL_BIG]: {
+    defaultHeight: 60,
+    minHeight: 60,
+    maxHeight: 65,
+    minWidth: 550,
+    maxWidth: 650,
+    gap: 7,
+    fontSize: 24,
+  },
+
+  [BUTTON_REDESIGN_SIZE.XXL]: {
+    defaultHeight: 65,
+    minHeight: 65,
+    maxHeight: 100,
+    minWidth: 650,
+    maxWidth: 750,
+    gap: 7,
+    fontSize: 26,
+  },
+};

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

@@ -3,7 +3,7 @@
 import { type FundingEligibilityType } from "@paypal/sdk-constants/src";
 
 import { pageStyle } from "./page";
-import { buttonStyle } from "./button";
+import { buttonStyle, buttonRebrandStyle } from "./button";
 import { labelStyle } from "./labels";
 import { buttonResponsiveStyle } from "./responsive";
 import { buttonColorStyle } from "./color";
@@ -26,6 +26,7 @@ export function componentStyle({
   return `
         ${pageStyle}
         ${buttonStyle}
+        ${shouldApplyRebrandedStyles ? buttonRebrandStyle : ""}
         ${buttonColorStyle}
         ${labelStyle}
         ${buttonResponsiveStyle({

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

@@ -151,3 +151,57 @@ export const buttonStyle = `
         }
     }
 `;
+
+export const buttonRebrandStyle = `
+
+    .${CLASS.BUTTON_REBRAND} {
+        border: 1px solid transparent;
+        border-radius: 0 3px 3px 0;
+        position: relative;
+        width: 100%;
+        box-sizing: border-box;
+        border: none;
+        vertical-align: top;
+        cursor: pointer;
+        overflow: hidden;
+    }
+
+    .${CLASS.BUTTON_REBRAND} > .${CLASS.BUTTON_LABEL} {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-wrap: nowrap;
+        height: 76%;
+        min-width: 0px;
+        position: relative;
+    }
+
+    .${LOGO_CLASS.LOGO} {
+        height: 100%;
+        padding: 0;
+        background: none;
+        border: none;
+        width: auto;        
+    }
+
+    .${CLASS.TEXT} {
+        position: relative !important;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        line-height: 1.1;
+    }
+    
+    .${CLASS.BUTTON_REBRAND} .${CLASS.BUTTON_LABEL} > .paypal-logo {
+        height: 100%;
+    }
+
+    .${CLASS.BUTTON_REBRAND} .${CLASS.TAGLINE} {
+        max-width: 100%;
+        font-size: initial;
+        font-weight: 400;
+        display: block;
+        text-align: center;
+        width: auto;
+    }
+`;

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

@@ -11,6 +11,10 @@ export const buttonColorStyle = `
         color: #2C2E2F;
     }
 
+    .${CLASS.BUTTON_REBRAND}.${CLASS.TEXT_COLOR}-${TEXT_COLOR.BLACK} {
+        color: #000000;
+    }
+
     .${CLASS.BUTTON}.${CLASS.TEXT_COLOR}-${TEXT_COLOR.WHITE} {
         color: #fff;
     }

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

@@ -17,12 +17,14 @@ import {
   BUTTON_SIZE_STYLE,
   BUTTON_RELATIVE_STYLE,
   BUTTON_DISABLE_MAX_HEIGHT_STYLE,
+  BUTTON_REDESIGN_STYLE,
 } from "../config";
 import { isBorderRadiusNumber } from "../util";
 
 import {
   getResponsiveStyleVariables,
   getDisableMaxHeightResponsiveStyleVariables,
+  getResponsiveRebrandedStyleVariables,
 } from "./styleUtils";
 
 const FIRST_BUTTON_PERC = 50;
@@ -77,10 +79,19 @@ const generateButtonSizeStyles = ({
         CLASS.CONTAINER
       } .${CLASS.BUTTON_ROW} .${CLASS.SPACE} {
                     font-size: ${max(perc(buttonHeight, 36), 10)}px;
-                    margin-top: -${perc(max(perc(buttonHeight, 36), 10), 10)}px;
                     line-height: ${labelHeight}px;
                 }
 
+                [${ATTRIBUTE.FUNDING_SOURCE}=
+                ${FUNDING.PAYPAL}] .${CLASS.TEXT},
+                [${ATTRIBUTE.FUNDING_SOURCE}=
+                ${FUNDING.PAYLATER}] .${CLASS.TEXT},
+                [${ATTRIBUTE.FUNDING_SOURCE}=
+                ${FUNDING.CREDIT}] .${CLASS.TEXT} 
+                {
+                    margin-top: -${perc(max(perc(buttonHeight, 36), 10), 10)}px;
+                }
+
                 .${CLASS.CONTAINER} .${CLASS.BUTTON_ROW} .${CLASS.TEXT} * {
                     margin-top: ${perc(max(perc(buttonHeight, 36), 10), 10)}px;
                 }
@@ -470,6 +481,225 @@ const generateDisableMaxHeightStyles = ({
     .join("\n");
 };
 
+const generateRebrandedButtonSizeStyles = ({
+  height,
+  disableMaxHeight,
+  borderRadius,
+}: {|
+  height?: ?number,
+  fundingEligibility?: FundingEligibilityType,
+  disableMaxWidth?: ?boolean,
+  disableMaxHeight?: ?boolean,
+  borderRadius?: ?number,
+  shouldApplyRebrandedStyles?: boolean,
+|}): string => {
+  return Object.keys(BUTTON_REDESIGN_STYLE)
+    .map((redesign_size) => {
+      const {
+        buttonHeight,
+        pillBorderRadius,
+        gap,
+        fontSize,
+        minHeight,
+        maxHeight,
+        minWidth,
+      } = getResponsiveRebrandedStyleVariables({
+        height,
+        redesign_size,
+      });
+
+      const widthBasedStyles = `
+        @media only screen and (min-width: ${minWidth}px) {
+          .${CLASS.BUTTON_ROW} {
+              height: ${buttonHeight}px;
+              vertical-align: top;
+              min-height: ${height || minHeight}px;
+              max-height: ${height || maxHeight}px;
+          }
+
+          .${CLASS.BUTTON_REBRAND} > .${CLASS.BUTTON_LABEL} {
+              margin: 0px 4vw;
+              box-sizing: border-box;
+              height: ${buttonHeight * 0.76}px;
+          }
+        }`;
+
+      const disableMaxHeightStyles = `
+        @media only screen and (min-height: ${minHeight}px) and (max-height: ${maxHeight}px) {
+          .${CLASS.BUTTON_ROW} {
+              height: ${buttonHeight}px;
+              vertical-align: top;
+              min-height: ${height || minHeight}px;
+              max-height: ${height || maxHeight}px;
+          }
+
+          .${CLASS.BUTTON_REBRAND} > .${CLASS.BUTTON_LABEL} {
+              margin: 0px 4vw;
+              box-sizing: border-box;
+              height: ${buttonHeight * 0.76}px;
+          }
+        }`;
+
+      const heightBasedStyles = `
+        @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.TEXT}, .${
+        CLASS.CONTAINER
+      } .${CLASS.BUTTON_ROW} .${CLASS.SPACE} {
+              font-size: ${fontSize}px;
+              position: relative; 
+          }
+
+          .${CLASS.BUTTON_REBRAND} .${CLASS.TEXT} {
+              line-height: 1.2;
+              margin: 0;
+          }
+
+          .${CLASS.BUTTON_ROW}.${CLASS.LAYOUT}-${BUTTON_LAYOUT.VERTICAL} {
+              margin-bottom: ${perc(
+                buttonHeight,
+                BUTTON_RELATIVE_STYLE.VERTICAL_MARGIN
+              )}px;
+          }
+
+          .${CLASS.BUTTON_ROW}.${CLASS.LAYOUT}-${
+        BUTTON_LAYOUT.VERTICAL
+      }:last-of-type {
+              margin-bottom: 0;
+          }
+
+          .${CLASS.BUTTON} {
+              display: inline-block;
+              text-align: center;
+              height: 100%;
+          }
+          
+          .${CLASS.BUTTON} .${CLASS.SPINNER} {
+              height: ${perc(buttonHeight, 50)}px;
+              width: ${perc(buttonHeight, 50)}px;
+          }
+
+          .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.APPLEPAY}] .${
+        CLASS.BUTTON_LABEL
+      } {
+              height: ${perc(buttonHeight, 80) + 5}px;
+          }
+
+          .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.APPLEPAY}] .${
+        CLASS.BUTTON_LABEL
+      } .${CLASS.TEXT} {
+              line-height: ${perc(buttonHeight, 80) + 5}px;
+          }
+
+          .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.EPS}] .${
+        CLASS.BUTTON_LABEL
+      },
+          .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.MYBANK}] .${
+        CLASS.BUTTON_LABEL
+      } {
+              height: ${perc(buttonHeight, 50) + 5}px;
+          }
+
+          .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.EPS}] .${
+        CLASS.BUTTON_LABEL
+      } .${CLASS.TEXT},
+          .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.EPS}] .${
+        CLASS.BUTTON_LABEL
+      } .${CLASS.SPACE},
+          .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.MYBANK}] .${
+        CLASS.BUTTON_LABEL
+      } .${CLASS.TEXT},
+          .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.MYBANK}] .${
+        CLASS.BUTTON_LABEL
+      } .${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(
+                buttonHeight,
+                BUTTON_RELATIVE_STYLE.TAGLINE
+              )}px;
+          }
+
+          .${CLASS.CARD} {
+              display: inline-block;
+              height: 100%;
+          }
+
+          .${CLASS.BUTTON_ROW}.${CLASS.WALLET}.${CLASS.WALLET_MENU} .${
+        CLASS.BUTTON
+      } {
+              width: calc(100% - ${buttonHeight + 2}px);
+              border-top-right-radius: 0px;
+              border-bottom-right-radius: 0px;
+          }
+
+          .menu-button {
+              height: ${buttonHeight}px;
+              width: ${buttonHeight}px;
+          }
+        }`;
+      return disableMaxHeight
+        ? disableMaxHeightStyles + heightBasedStyles
+        : widthBasedStyles + heightBasedStyles;
+    })
+    .join("\n");
+};
+
 export function buttonResponsiveStyle({
   height,
   fundingEligibility,
@@ -494,6 +724,14 @@ export function buttonResponsiveStyle({
     shouldApplyRebrandedStyles,
   });
 
+  const buttonRedesignSizeStyles = generateRebrandedButtonSizeStyles({
+    height,
+    fundingEligibility,
+    disableMaxWidth,
+    disableMaxHeight,
+    borderRadius,
+  });
+
   const disableMaxHeightStyles = disableMaxHeight
     ? generateDisableMaxHeightStyles({
         fundingEligibility,
@@ -501,5 +739,55 @@ export function buttonResponsiveStyle({
       })
     : "";
 
-  return buttonSizeStyles + disableMaxHeightStyles;
+  const baseStyles = `
+    .${CLASS.BUTTON} {
+        display: inline-block;
+        text-align: center;
+        height: 100%;
+    }
+    
+    // border radius
+    .${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;
+    }
+
+    // menu button - border radius
+    .${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.CARD} {
+        display: inline-block;
+        height: 100%;
+    }`;
+
+  const rebrandedStyles = shouldApplyRebrandedStyles
+    ? buttonRedesignSizeStyles
+    : buttonSizeStyles + disableMaxHeightStyles;
+
+  return baseStyles + rebrandedStyles;
 }

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

@@ -3,10 +3,15 @@
 import { max, perc, roundUp } from "@krakenjs/belter/src";
 import type { FundingEligibilityType } from "@paypal/sdk-constants/src";
 
-import { BUTTON_DISABLE_MAX_HEIGHT_STYLE, BUTTON_SIZE_STYLE } from "../config";
+import {
+  BUTTON_DISABLE_MAX_HEIGHT_STYLE,
+  BUTTON_SIZE_STYLE,
+  BUTTON_REDESIGN_STYLE,
+} from "../config";
 import {
   BUTTON_SIZE,
   BUTTON_DISABLE_MAX_HEIGHT_SIZE,
+  BUTTON_REDESIGN_SIZE,
 } from "../../../constants";
 
 const BUTTON_MIN_ASPECT_RATIO = 2.2;
@@ -156,6 +161,52 @@ export function getResponsiveStyleVariables({
   return styleVariables;
 }
 
+export function getResponsiveRebrandedStyleVariables({
+  height,
+  redesign_size,
+}: {|
+  height?: ?number,
+  redesign_size: $Values<typeof BUTTON_REDESIGN_SIZE>,
+|}): Object {
+  const style = BUTTON_REDESIGN_STYLE[redesign_size];
+  const {
+    minHeight,
+    maxHeight,
+    defaultHeight,
+    minWidth,
+    maxWidth,
+    gap,
+    fontSize,
+    padding,
+  } = style;
+
+  const buttonHeight = height || defaultHeight;
+  const pillBorderRadius = Math.ceil(buttonHeight / 2);
+
+  const minDualWidth = Math.max(
+    Math.round(
+      buttonHeight * BUTTON_MIN_ASPECT_RATIO * (100 / WALLET_BUTTON_PERC)
+    ),
+    MIN_SPLIT_BUTTON_WIDTH
+  );
+
+  const styleVariables = {
+    style,
+    buttonHeight,
+    pillBorderRadius,
+    gap,
+    minHeight,
+    maxHeight,
+    minWidth,
+    minDualWidth,
+    maxWidth,
+    fontSize,
+    padding,
+  };
+
+  return styleVariables;
+}
+
 export function getDisableMaxHeightResponsiveStyleVariables({
   fundingEligibility,
   shouldApplyRebrandedStyles,