Feature/disable max height new fix (#2485)

* Initial changes for disable max height fix, added a styleUtils.js file and renamed responsive-test to styleUtils-test. Created new function getResponsiveStyleVariablesDisableMaxHeight.

* Updated getResponsiveStyleVariables to handle disableMaxHeight and return new sizes for BUTTON_DISABLE_HEIGHT_SIZE. CSS for disableMaxHeight added to end and returned in buttonResponsiveStyle()

* Updated code to fix flow errors

* Added tests for disable max height responsiveness. Added new breakpoints for button sizes medium/large-small/big. Refactored getResponsiveVariables and added disable max height logic to new function, getDisableMaxHeightResponsiveVariables

* Added disableMaxHeight tests for rebrand button and refactored responsive.js by creating a new function to generate the disableMaxHeight styles

* Fixed eslint errors

* Updated code to account for edge cases with APM buttons, Apple Pay, and the menu button. New functions created in styleUtils to calculate the css properties for these cases according to break points

* dist/ files restored and variable name updated in config.js

* Updated disable max height button size configurations

* Updated test cases with new style variables and added test case to test shouldResizeLable parameter

* restoring dist/button files to main

* Updated variable names to include MAX in BUTTON_DISABLE_MAX_HEIGHT_SIZE/STYLE and added shouldResizeLabel test cases for getResponsiveVariables

Author: delbarrow

Diff for: 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"),

Diff for: 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,
+  },
+};

Diff for: 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,96 +12,38 @@ 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,
   disableMaxWidth?: ?boolean,
   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;
 }