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

Author: delbarrow

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,7 +12,6 @@ import {
   BUTTON_NUMBER,
   CLASS,
   ATTRIBUTE,
-  BUTTON_SIZE,
 } from "../../../constants";
 import {
   BUTTON_SIZE_STYLE,
@@ -29,25 +28,22 @@ import {
 const FIRST_BUTTON_PERC = 50;
 const WALLET_BUTTON_PERC = 60;
 
-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 {
-  let button_size_style_obj = "";
-  let button_disable_max_style = "";
-
-  Object.keys(BUTTON_SIZE_STYLE)
+|}): string => {
+  return Object.keys(BUTTON_SIZE_STYLE)
     .map((size) => {
       const {
         style,
@@ -64,7 +60,7 @@ export function buttonResponsiveStyle({
         size,
       });
 
-      button_size_style_obj += `
+      return `
             @media only screen and (min-width: ${style.minWidth}px) {
                 .${CLASS.CONTAINER} {
                     min-width: ${style.minWidth}px;
@@ -356,9 +352,17 @@ export function buttonResponsiveStyle({
       `;
     })
     .join("\n");
+};
 
-  if (disableMaxHeight) {
-    Object.keys(BUTTON_DISABLE_MAX_HEIGHT_STYLE).map((disableMaxHeightSize) => {
+const generateDisableMaxHeightStyles = ({
+  fundingEligibility,
+  experiment,
+}: {|
+  fundingEligibility: FundingEligibilityType,
+  experiment: Experiment,
+|}): string => {
+  return Object.keys(BUTTON_DISABLE_MAX_HEIGHT_STYLE)
+    .map((disableMaxHeightSize) => {
       const {
         disableHeightStyle,
         labelHeight,
@@ -373,7 +377,7 @@ export function buttonResponsiveStyle({
 
       const { minHeight, maxHeight } = disableHeightStyle;
 
-      button_disable_max_style += `
+      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} {
@@ -396,8 +400,40 @@ export function buttonResponsiveStyle({
               }
             }
           `;
-    });
-  }
+    })
+    .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 button_size_style_obj + button_disable_max_style;
+  return buttonSizeStyles + disableMaxHeightStyles;
 }

Diff for: src/ui/buttons/styles/styleUtils.js

@@ -14,13 +14,13 @@ const MIN_SPLIT_BUTTON_WIDTH = 300;
 const FIRST_BUTTON_PERC = 50;
 const WALLET_BUTTON_PERC = 60;
 
-export function getLabelHeight({
+function getLabelHeight({
   height,
   shouldApplyRebrandedStyles,
   shouldResizeLabel,
 }: {
   height: number,
-  shouldApplyRebrandedStyles: boolean,
+  shouldApplyRebrandedStyles?: boolean,
   shouldResizeLabel: boolean,
 }): number {
   const labelPercPercentage = shouldResizeLabel ? 32 : 35;
@@ -33,7 +33,7 @@ export function getLabelHeight({
   return parseInt(labelHeight, 10);
 }
 
-export function getFontSize({
+function getFontSize({
   height,
   shouldResizeLabel,
 }: {
@@ -46,15 +46,14 @@ export function getFontSize({
   return parseInt(textSize, 10);
 }
 
-export function getMarginTop({
+function getMarginTop({
   height,
   shouldResizeLabel,
 }: {
   height: number,
   shouldResizeLabel: boolean,
 }): number {
   const marginTopPercPercentage = shouldResizeLabel ? 32 : 36;
-
   const marginTop = `${perc(
     max(perc(height, marginTopPercPercentage), 10),
     10
@@ -63,7 +62,7 @@ export function getMarginTop({
   return parseInt(marginTop, 10);
 }
 
-export function getSpinnerSize({ height }: { height: number }): number {
+function getSpinnerSize({ height }: { height: number }): number {
   const spinner = `${perc(height, 50)}`;
 
   return parseInt(spinner, 10);
@@ -147,11 +146,6 @@ export function getDisableMaxHeightResponsiveStyleVariables({
 
   const disableHeightStyle =
     BUTTON_DISABLE_MAX_HEIGHT_STYLE[disableMaxHeightSize];
-
-  if (!disableHeightStyle) {
-    return {};
-  }
-
   const buttonHeight = disableHeightStyle.defaultHeight;
 
   const { paylater } = fundingEligibility;
@@ -161,12 +155,11 @@ export function getDisableMaxHeightResponsiveStyleVariables({
     paylater?.products?.payIn3?.variant === "IT" ||
     paylater?.products?.payIn3?.variant === "ES";
 
-  let labelHeight = getLabelHeight({
+  const labelHeight = getLabelHeight({
     height: buttonHeight,
     shouldApplyRebrandedStyles,
     shouldResizeLabel,
   });
-
   const fontSize = getFontSize({
     height: buttonHeight,
     shouldApplyRebrandedStyles,