@paypal/checkout-components 5.0.356 → 5.0.357

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@paypal/checkout-components",
-  "version": "5.0.356",
+  "version": "5.0.357",
   "description": "PayPal Checkout components, for integrating checkout products.",
   "main": "index.js",
   "scripts": {

package/src/constants/button.js

@@ -38,6 +38,18 @@ export const BUTTON_SIZE = {
   RESPONSIVE: ("responsive": "responsive"),
 };
 
+export const BUTTON_DISABLE_MAX_HEIGHT_SIZE = {
+  TINY: ("tiny": "tiny"),
+  SMALL: ("small": "small"),
+  MEDIUM_SMALL: ("mediumSmall": "mediumSmall"),
+  MEDIUM_BIG: ("mediumBig": "mediumBig"),
+  LARGE_SMALL: ("largeSmall": "largeSmall"),
+  LARGE_BIG: ("largeBig": "largeBig"),
+  XL: ("xl": "xl"),
+  XXL: ("xxl": "xxl"),
+  XXXL: ("xxxl": "xxxl"),
+};
+
 export const BUTTON_SHAPE = {
   PILL: ("pill": "pill"),
   RECT: ("rect": "rect"),

package/src/ui/buttons/config.js

@@ -1,7 +1,11 @@
 /* @flow */
 /* eslint no-template-curly-in-string: off, max-lines: off */
 
-import { BUTTON_SIZE, BUTTON_LAYOUT } from "../../constants";
+import {
+  BUTTON_SIZE,
+  BUTTON_DISABLE_MAX_HEIGHT_SIZE,
+  BUTTON_LAYOUT,
+} from "../../constants";
 
 export const MINIMUM_SIZE: {|
   [$Values<typeof BUTTON_LAYOUT>]: $Values<typeof BUTTON_SIZE>,
@@ -33,6 +37,14 @@ type ButtonStyleMap = {
   |},
 };
 
+type ButtonDisableMaxHeightStyleMap = {
+  [$Values<typeof BUTTON_DISABLE_MAX_HEIGHT_SIZE>]: {|
+    defaultHeight: number,
+    minHeight: number,
+    maxHeight: number,
+  |},
+};
+
 export const BUTTON_SIZE_STYLE: ButtonStyleMap = {
   [BUTTON_SIZE.TINY]: {
     defaultWidth: 75,
@@ -79,3 +91,59 @@ export const BUTTON_SIZE_STYLE: ButtonStyleMap = {
     maxHeight: 55,
   },
 };
+
+export const BUTTON_DISABLE_MAX_HEIGHT_STYLE: ButtonDisableMaxHeightStyleMap = {
+  [BUTTON_DISABLE_MAX_HEIGHT_SIZE.TINY]: {
+    defaultHeight: 25,
+    minHeight: 25,
+    maxHeight: 30,
+  },
+
+  [BUTTON_DISABLE_MAX_HEIGHT_SIZE.SMALL]: {
+    defaultHeight: 30,
+    minHeight: 30,
+    maxHeight: 35,
+  },
+
+  [BUTTON_DISABLE_MAX_HEIGHT_SIZE.MEDIUM_SMALL]: {
+    defaultHeight: 35,
+    minHeight: 35,
+    maxHeight: 40,
+  },
+
+  [BUTTON_DISABLE_MAX_HEIGHT_SIZE.MEDIUM_BIG]: {
+    defaultHeight: 40,
+    minHeight: 40,
+    maxHeight: 45,
+  },
+
+  [BUTTON_DISABLE_MAX_HEIGHT_SIZE.LARGE_SMALL]: {
+    defaultHeight: 45,
+    minHeight: 45,
+    maxHeight: 50,
+  },
+
+  [BUTTON_DISABLE_MAX_HEIGHT_SIZE.LARGE_BIG]: {
+    defaultHeight: 50,
+    minHeight: 50,
+    maxHeight: 55,
+  },
+
+  [BUTTON_DISABLE_MAX_HEIGHT_SIZE.XL]: {
+    defaultHeight: 55,
+    minHeight: 55,
+    maxHeight: 65,
+  },
+
+  [BUTTON_DISABLE_MAX_HEIGHT_SIZE.XXL]: {
+    defaultHeight: 65,
+    minHeight: 65,
+    maxHeight: 75,
+  },
+
+  [BUTTON_DISABLE_MAX_HEIGHT_SIZE.XXXL]: {
+    defaultHeight: 75,
+    minHeight: 75,
+    maxHeight: 200,
+  },
+};

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

@@ -1,6 +1,6 @@
 /* @flow */
 
-import { max, perc, roundUp } from "@krakenjs/belter/src";
+import { max, perc } from "@krakenjs/belter/src";
 import {
   FUNDING,
   type FundingEligibilityType,
@@ -12,88 +12,30 @@ import {
   BUTTON_NUMBER,
   CLASS,
   ATTRIBUTE,
-  BUTTON_SIZE,
 } from "../../../constants";
-import { BUTTON_SIZE_STYLE, BUTTON_RELATIVE_STYLE } from "../config";
+import {
+  BUTTON_SIZE_STYLE,
+  BUTTON_RELATIVE_STYLE,
+  BUTTON_DISABLE_MAX_HEIGHT_STYLE,
+} from "../config";
 import { isBorderRadiusNumber } from "../util";
 import type { Experiment } from "../../../types";
 
-const BUTTON_MIN_ASPECT_RATIO = 2.2;
-const MIN_SPLIT_BUTTON_WIDTH = 300;
+import {
+  getResponsiveStyleVariables,
+  getDisableMaxHeightResponsiveStyleVariables,
+} from "./styleUtils";
 
 const FIRST_BUTTON_PERC = 50;
 const WALLET_BUTTON_PERC = 60;
 
-export function getResponsiveStyleVariables({
-  height,
-  fundingEligibility,
-  experiment = {},
-  size,
-}: {|
-  height?: ?number,
-  fundingEligibility: FundingEligibilityType,
-  experiment: Experiment,
-  size: $Values<typeof BUTTON_SIZE>,
-|}): Object {
-  const { isPaypalRebrandEnabled, defaultBlueButtonColor } = experiment;
-  const shouldApplyRebrandedStyles =
-    isPaypalRebrandEnabled && defaultBlueButtonColor !== "gold";
-
-  const style = BUTTON_SIZE_STYLE[size];
-
-  const buttonHeight = height || style.defaultHeight;
-  const minDualWidth = Math.max(
-    Math.round(
-      buttonHeight * BUTTON_MIN_ASPECT_RATIO * (100 / WALLET_BUTTON_PERC)
-    ),
-    MIN_SPLIT_BUTTON_WIDTH
-  );
-
-  const { paylater } = fundingEligibility;
-
-  const shouldResizeLabel =
-    paylater?.products?.paylater?.variant === "DE" ||
-    paylater?.products?.payIn3?.variant === "IT" ||
-    paylater?.products?.payIn3?.variant === "ES";
-
-  const textPercPercentage = shouldResizeLabel ? 32 : 36;
-  const labelPercPercentage = shouldResizeLabel ? 32 : 35;
-
-  let smallerLabelHeight = max(
-    roundUp(perc(buttonHeight, labelPercPercentage) + 5, 2),
-    12
-  );
-  let labelHeight = max(roundUp(perc(buttonHeight, 35) + 5, 2), 12);
-
-  const pillBorderRadius = Math.ceil(buttonHeight / 2);
-
-  if (shouldApplyRebrandedStyles) {
-    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;
-  }
-
-  const styleVariables = {
-    style,
-    buttonHeight,
-    minDualWidth,
-    textPercPercentage,
-    smallerLabelHeight,
-    labelHeight,
-    pillBorderRadius,
-  };
-
-  return styleVariables;
-}
-
-export function buttonResponsiveStyle({
+const generateButtonSizeStyles = ({
   height,
   fundingEligibility,
   disableMaxWidth,
   disableMaxHeight,
   borderRadius,
-  experiment = {},
+  experiment,
 }: {|
   height?: ?number,
   fundingEligibility: FundingEligibilityType,
@@ -101,7 +43,7 @@ export function buttonResponsiveStyle({
   disableMaxHeight?: ?boolean,
   borderRadius?: ?number,
   experiment: Experiment,
-|}): string {
+|}): string => {
   return Object.keys(BUTTON_SIZE_STYLE)
     .map((size) => {
       const {
@@ -121,7 +63,6 @@ export function buttonResponsiveStyle({
 
       return `
             @media only screen and (min-width: ${style.minWidth}px) {
-
                 .${CLASS.CONTAINER} {
                     min-width: ${style.minWidth}px;
                     ${disableMaxWidth ? "" : `max-width: ${style.maxWidth}px;`};
@@ -409,8 +350,147 @@ export function buttonResponsiveStyle({
                     display: block;
                 }
             }
+      `;
+    })
+    .join("\n");
+};
 
-        `;
+const generateDisableMaxHeightStyles = ({
+  fundingEligibility,
+  experiment,
+}: {|
+  fundingEligibility: FundingEligibilityType,
+  experiment: Experiment,
+|}): string => {
+  return Object.keys(BUTTON_DISABLE_MAX_HEIGHT_STYLE)
+    .map((disableMaxHeightSize) => {
+      const {
+        disableHeightStyle,
+        buttonHeight,
+        labelHeight,
+        fontSize,
+        marginTop,
+        spinnerSize,
+        pillBorderRadius,
+        APMHeight,
+        applePayHeight,
+      } = getDisableMaxHeightResponsiveStyleVariables({
+        fundingEligibility,
+        experiment,
+        disableMaxHeightSize,
+      });
+
+      const { minHeight, maxHeight } = disableHeightStyle;
+
+      return `
+            @media (min-height: ${minHeight}px) and (max-height: ${maxHeight}px) {
+              .${CLASS.CONTAINER} .${CLASS.BUTTON_ROW} .${CLASS.TEXT},
+              .${CLASS.CONTAINER} .${CLASS.BUTTON_ROW} .${CLASS.SPACE} {
+                font-size: ${fontSize}px;
+                margin-top: -${marginTop}px;
+                line-height: ${labelHeight}px;
+              }
+              
+              .${CLASS.CONTAINER} .${CLASS.BUTTON_ROW} .${CLASS.TEXT} * {
+                margin-top: ${marginTop}px;
+              }
+            
+              .${CLASS.BUTTON} .${CLASS.SPINNER} {
+                height: ${spinnerSize}px;
+                width: ${spinnerSize}px;
+              }
+              
+              .${CLASS.BUTTON} > .${CLASS.BUTTON_LABEL} {
+                margin: 0 4vw;
+                height: ${labelHeight}px;
+              }
+
+              .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.APPLEPAY}] 
+              .${CLASS.BUTTON_LABEL} {
+                height: ${applePayHeight}px;
+              }
+
+              .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.APPLEPAY}] 
+              .${CLASS.BUTTON_LABEL} .${CLASS.TEXT} {
+                line-height: ${applePayHeight}px;
+              }
+
+              .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.EPS}] 
+              .${CLASS.BUTTON_LABEL},
+              .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.MYBANK}] 
+              .${CLASS.BUTTON_LABEL} {
+                height: ${APMHeight}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: ${APMHeight}px;
+              }
+
+              .${CLASS.BUTTON}.${CLASS.SHAPE}-${BUTTON_SHAPE.PILL} {
+                border-radius: ${pillBorderRadius}px;
+              }
+
+              .${CLASS.BUTTON_ROW}.${CLASS.SHAPE}-${BUTTON_SHAPE.PILL} 
+              .menu-button {
+                border-top-right-radius: ${pillBorderRadius}px;
+                border-bottom-right-radius: ${pillBorderRadius}px;
+              }
+
+              .${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: 100%;
+                width: auto;
+                aspect-ratio: 1;
+              }
+            }
+          `;
     })
     .join("\n");
+};
+
+export function buttonResponsiveStyle({
+  height,
+  fundingEligibility,
+  disableMaxWidth,
+  disableMaxHeight,
+  borderRadius,
+  experiment = {},
+}: {|
+  height?: ?number,
+  fundingEligibility: FundingEligibilityType,
+  disableMaxWidth?: ?boolean,
+  disableMaxHeight?: ?boolean,
+  borderRadius?: ?number,
+  experiment: Experiment,
+|}): string {
+  const buttonSizeStyles = generateButtonSizeStyles({
+    height,
+    fundingEligibility,
+    disableMaxWidth,
+    disableMaxHeight,
+    borderRadius,
+    experiment,
+  });
+
+  const disableMaxHeightStyles = disableMaxHeight
+    ? generateDisableMaxHeightStyles({
+        fundingEligibility,
+        experiment,
+      })
+    : "";
+
+  return buttonSizeStyles + disableMaxHeightStyles;
 }

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

@@ -0,0 +1,209 @@
+/* @flow */
+
+import { max, perc, roundUp } from "@krakenjs/belter/src";
+import type { FundingEligibilityType } from "@paypal/sdk-constants/src";
+
+import type { Experiment } from "../../../types";
+import { BUTTON_DISABLE_MAX_HEIGHT_STYLE, BUTTON_SIZE_STYLE } from "../config";
+import {
+  BUTTON_SIZE,
+  BUTTON_DISABLE_MAX_HEIGHT_SIZE,
+} from "../../../constants";
+
+const BUTTON_MIN_ASPECT_RATIO = 2.2;
+const MIN_SPLIT_BUTTON_WIDTH = 300;
+
+const WALLET_BUTTON_PERC = 60;
+
+function getLabelHeight({
+  height,
+  shouldApplyRebrandedStyles,
+  shouldResizeLabel,
+}: {|
+  height: number,
+  shouldApplyRebrandedStyles?: boolean,
+  shouldResizeLabel: boolean,
+|}): number {
+  const labelPercPercentage = shouldResizeLabel ? 32 : 35;
+  let labelHeight = max(roundUp(perc(height, labelPercPercentage) + 5, 2), 12);
+
+  if (shouldApplyRebrandedStyles) {
+    labelHeight = roundUp(perc(height, 76), 1);
+  }
+
+  return parseInt(labelHeight, 10);
+}
+
+function getFontSize({
+  height,
+  shouldResizeLabel,
+}: {|
+  height: number,
+  shouldResizeLabel: boolean,
+|}): number {
+  const fontPercPercentage = shouldResizeLabel ? 32 : 36;
+  const textSize = `${max(perc(height, fontPercPercentage), 10)}`;
+
+  return parseInt(textSize, 10);
+}
+
+function getMarginTop({
+  height,
+  shouldResizeLabel,
+}: {|
+  height: number,
+  shouldResizeLabel: boolean,
+|}): number {
+  const marginTopPercPercentage = shouldResizeLabel ? 32 : 36;
+  const marginTop = `${perc(
+    max(perc(height, marginTopPercPercentage), 10),
+    10
+  )}`;
+
+  return parseInt(marginTop, 10);
+}
+
+function getSpinnerSize({ height }: {| height: number |}): number {
+  const spinner = `${perc(height, 50)}`;
+
+  return parseInt(spinner, 10);
+}
+
+function getAPMButtonHeight({ height }: {| height: number |}): number {
+  const buttonHeight = perc(height, 50) + 5;
+
+  return parseInt(buttonHeight, 10);
+}
+
+function getApplePayButtonHeight({ height }: {| height: number |}): number {
+  const buttonHeight = perc(height, 80) + 5;
+
+  return parseInt(buttonHeight, 10);
+}
+
+export function getResponsiveStyleVariables({
+  height,
+  fundingEligibility,
+  experiment = {},
+  size,
+}: {|
+  height?: ?number,
+  fundingEligibility: FundingEligibilityType,
+  experiment: Experiment,
+  size: $Values<typeof BUTTON_SIZE>,
+|}): Object {
+  const { isPaypalRebrandEnabled, defaultBlueButtonColor } = experiment;
+  const shouldApplyRebrandedStyles =
+    isPaypalRebrandEnabled && defaultBlueButtonColor !== "gold";
+
+  const style = BUTTON_SIZE_STYLE[size];
+
+  const buttonHeight = height || style.defaultHeight;
+  const minDualWidth = Math.max(
+    Math.round(
+      buttonHeight * BUTTON_MIN_ASPECT_RATIO * (100 / WALLET_BUTTON_PERC)
+    ),
+    MIN_SPLIT_BUTTON_WIDTH
+  );
+
+  const { paylater } = fundingEligibility;
+
+  const shouldResizeLabel =
+    paylater?.products?.paylater?.variant === "DE" ||
+    paylater?.products?.payIn3?.variant === "IT" ||
+    paylater?.products?.payIn3?.variant === "ES";
+
+  const textPercPercentage = shouldResizeLabel ? 32 : 36;
+  const labelPercPercentage = shouldResizeLabel ? 32 : 35;
+
+  let smallerLabelHeight = max(
+    roundUp(perc(buttonHeight, labelPercPercentage) + 5, 2),
+    12
+  );
+  let labelHeight = max(roundUp(perc(buttonHeight, 35) + 5, 2), 12);
+
+  const pillBorderRadius = Math.ceil(buttonHeight / 2);
+
+  if (shouldApplyRebrandedStyles) {
+    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;
+  }
+
+  const styleVariables = {
+    style,
+    buttonHeight,
+    minDualWidth,
+    textPercPercentage,
+    smallerLabelHeight,
+    labelHeight,
+    pillBorderRadius,
+  };
+
+  return styleVariables;
+}
+
+export function getDisableMaxHeightResponsiveStyleVariables({
+  fundingEligibility,
+  experiment,
+  disableMaxHeightSize,
+}: {|
+  fundingEligibility: FundingEligibilityType,
+  experiment: Experiment,
+  disableMaxHeightSize: $Values<typeof BUTTON_DISABLE_MAX_HEIGHT_SIZE>,
+|}): Object {
+  const { isPaypalRebrandEnabled, defaultBlueButtonColor } = experiment;
+  const shouldApplyRebrandedStyles =
+    isPaypalRebrandEnabled && defaultBlueButtonColor !== "gold";
+
+  const disableHeightStyle =
+    BUTTON_DISABLE_MAX_HEIGHT_STYLE[disableMaxHeightSize];
+  const buttonHeight = disableHeightStyle.defaultHeight;
+
+  const { paylater } = fundingEligibility;
+
+  const shouldResizeLabel =
+    paylater?.products?.paylater?.variant === "DE" ||
+    paylater?.products?.payIn3?.variant === "IT" ||
+    paylater?.products?.payIn3?.variant === "ES";
+
+  const labelHeight = getLabelHeight({
+    height: buttonHeight,
+    shouldApplyRebrandedStyles,
+    shouldResizeLabel,
+  });
+  const fontSize = getFontSize({
+    height: buttonHeight,
+    shouldResizeLabel,
+  });
+  const marginTop = getMarginTop({
+    height: buttonHeight,
+    shouldResizeLabel,
+  });
+  const spinnerSize = getSpinnerSize({
+    height: buttonHeight,
+  });
+  const APMHeight = getAPMButtonHeight({
+    height: buttonHeight,
+  });
+  const applePayHeight = getApplePayButtonHeight({
+    height: buttonHeight,
+  });
+
+  const pillBorderRadius = Math.ceil(buttonHeight / 2);
+
+  const styleVariables = {
+    disableHeightStyle,
+    buttonHeight,
+    labelHeight,
+    fontSize,
+    marginTop,
+    spinnerSize,
+    pillBorderRadius,
+    APMHeight,
+    applePayHeight,
+  };
+
+  return styleVariables;
+}