@paypal/checkout-components 5.0.421 → 5.0.422-alpha-04293bf.0

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

@@ -7,614 +7,65 @@ import {
   BUTTON_REDESIGN_SIZE,
   BUTTON_DISABLE_MAX_HEIGHT_SIZE,
 } from "../../../constants/button";
-import {
-  BUTTON_SIZE_STYLE,
-  BUTTON_DISABLE_MAX_HEIGHT_STYLE,
-  BUTTON_REDESIGN_STYLE,
-} from "../config";
 
 import {
   getResponsiveStyleVariables,
   getResponsiveRebrandedStyleVariables,
   getDisableMaxHeightResponsiveStyleVariables,
 } from "./styleUtils";
-
-// expected legacy responsive styles variables
-const expectedLegacyResponsiveStylesTiny = {
-  style: BUTTON_SIZE_STYLE[BUTTON_SIZE.TINY],
-  buttonHeight: 25,
-  minDualWidth: 300,
-  textPercPercentage: 36,
-  smallerLabelHeight: 14,
-  labelHeight: 14,
-  pillBorderRadius: 13,
-  gap: 3,
-};
-
-const expectedLegacyResponsiveStylesSmall = {
-  style: BUTTON_SIZE_STYLE[BUTTON_SIZE.SMALL],
-  buttonHeight: 25,
-  minDualWidth: 300,
-  textPercPercentage: 36,
-  smallerLabelHeight: 14,
-  labelHeight: 14,
-  pillBorderRadius: 13,
-  gap: 3,
-};
-
-const expectedLegacyResponsiveStylesMedium = {
-  style: BUTTON_SIZE_STYLE[BUTTON_SIZE.MEDIUM],
-  buttonHeight: 35,
-  minDualWidth: 300,
-  textPercPercentage: 36,
-  smallerLabelHeight: 18,
-  labelHeight: 18,
-  pillBorderRadius: 18,
-  gap: 4,
-};
-
-const expectedLegacyResponsiveStylesLarge = {
-  style: BUTTON_SIZE_STYLE[BUTTON_SIZE.LARGE],
-  buttonHeight: 45,
-  minDualWidth: 300,
-  textPercPercentage: 36,
-  smallerLabelHeight: 22,
-  labelHeight: 22,
-  pillBorderRadius: 23,
-  gap: 5,
-};
-
-const expectedLegacyResponsiveStylesHuge = {
-  style: BUTTON_SIZE_STYLE[BUTTON_SIZE.HUGE],
-  buttonHeight: 55,
-  minDualWidth: 300,
-  textPercPercentage: 36,
-  smallerLabelHeight: 24,
-  labelHeight: 24,
-  pillBorderRadius: 28,
-  gap: 6,
-};
-
-// expected should resize = true responsive styles variables
-const expectedResizeLabelResponsiveStylesTiny = {
-  style: BUTTON_SIZE_STYLE[BUTTON_SIZE.TINY],
-  buttonHeight: 25,
-  minDualWidth: 300,
-  textPercPercentage: 32,
-  smallerLabelHeight: 14,
-  labelHeight: 14,
-  pillBorderRadius: 13,
-  gap: 3,
-};
-
-const expectedResizeLabelResponsiveStylesSmall = {
-  style: BUTTON_SIZE_STYLE[BUTTON_SIZE.SMALL],
-  buttonHeight: 25,
-  minDualWidth: 300,
-  textPercPercentage: 32,
-  smallerLabelHeight: 14,
-  labelHeight: 14,
-  pillBorderRadius: 13,
-  gap: 3,
-};
-
-const expectedResizeLabelResponsiveStylesMedium = {
-  style: BUTTON_SIZE_STYLE[BUTTON_SIZE.MEDIUM],
-  buttonHeight: 35,
-  minDualWidth: 300,
-  textPercPercentage: 32,
-  smallerLabelHeight: 16,
-  labelHeight: 18,
-  pillBorderRadius: 18,
-  gap: 4,
-};
-
-const expectedResizeLabelResponsiveStylesLarge = {
-  style: BUTTON_SIZE_STYLE[BUTTON_SIZE.LARGE],
-  buttonHeight: 45,
-  minDualWidth: 300,
-  textPercPercentage: 32,
-  smallerLabelHeight: 20,
-  labelHeight: 22,
-  pillBorderRadius: 23,
-  gap: 5,
-};
-
-const expectedResizeLabelResponsiveStylesHuge = {
-  style: BUTTON_SIZE_STYLE[BUTTON_SIZE.HUGE],
-  buttonHeight: 55,
-  minDualWidth: 300,
-  textPercPercentage: 32,
-  smallerLabelHeight: 24,
-  labelHeight: 24,
-  pillBorderRadius: 28,
-  gap: 6,
-};
-
-// DISABLE MAX HEIGHT TESTS
-
-// expected legacy responsive styles variables
-const expectedLegacyDisableMaxHeightStylesTiny = {
-  APMHeight: 18,
-  applePayHeight: 25,
-  buttonHeight: 25,
-  disableHeightStyle:
-    BUTTON_DISABLE_MAX_HEIGHT_STYLE[BUTTON_DISABLE_MAX_HEIGHT_SIZE.TINY],
-  labelHeight: 14,
-  fontSize: 10,
-  marginTop: 1,
-  pillBorderRadius: 13,
-  spinnerSize: 13,
-  gap: 3,
-};
-
-const expectedLegacyDisableMaxHeightStylesSmall = {
-  APMHeight: 20,
-  applePayHeight: 29,
-  buttonHeight: 30,
-  disableHeightStyle:
-    BUTTON_DISABLE_MAX_HEIGHT_STYLE[BUTTON_DISABLE_MAX_HEIGHT_SIZE.SMALL],
-  labelHeight: 16,
-  fontSize: 11,
-  marginTop: 1,
-  pillBorderRadius: 15,
-  spinnerSize: 15,
-  gap: 3,
-};
-
-const expectedLegacyDisableMaxHeightStylesMediumSmall = {
-  APMHeight: 23,
-  applePayHeight: 33,
-  buttonHeight: 35,
-  disableHeightStyle:
-    BUTTON_DISABLE_MAX_HEIGHT_STYLE[
-      BUTTON_DISABLE_MAX_HEIGHT_SIZE.MEDIUM_SMALL
-    ],
-  labelHeight: 18,
-  fontSize: 13,
-  marginTop: 1,
-  pillBorderRadius: 18,
-  spinnerSize: 18,
-  gap: 4,
-};
-
-const expectedLegacyDisableMaxHeightStylesMediumBig = {
-  APMHeight: 25,
-  applePayHeight: 37,
-  buttonHeight: 40,
-  disableHeightStyle:
-    BUTTON_DISABLE_MAX_HEIGHT_STYLE[BUTTON_DISABLE_MAX_HEIGHT_SIZE.MEDIUM_BIG],
-  labelHeight: 20,
-  fontSize: 14,
-  marginTop: 1,
-  pillBorderRadius: 20,
-  spinnerSize: 20,
-  gap: 4,
-};
-
-const expectedLegacyDisableMaxHeightStylesLargeSmall = {
-  APMHeight: 28,
-  applePayHeight: 41,
-  buttonHeight: 45,
-  disableHeightStyle:
-    BUTTON_DISABLE_MAX_HEIGHT_STYLE[BUTTON_DISABLE_MAX_HEIGHT_SIZE.LARGE_SMALL],
-  labelHeight: 22,
-  fontSize: 16,
-  marginTop: 2,
-  pillBorderRadius: 23,
-  spinnerSize: 23,
-  gap: 5,
-};
-
-const expectedLegacyDisableMaxHeightStylesLargeBig = {
-  APMHeight: 30,
-  applePayHeight: 45,
-  buttonHeight: 50,
-  disableHeightStyle:
-    BUTTON_DISABLE_MAX_HEIGHT_STYLE[BUTTON_DISABLE_MAX_HEIGHT_SIZE.LARGE_BIG],
-  labelHeight: 24,
-  fontSize: 18,
-  marginTop: 2,
-  pillBorderRadius: 25,
-  spinnerSize: 25,
-  gap: 5,
-};
-
-const expectedLegacyDisableMaxHeightStylesXL = {
-  APMHeight: 33,
-  applePayHeight: 49,
-  buttonHeight: 55,
-  disableHeightStyle:
-    BUTTON_DISABLE_MAX_HEIGHT_STYLE[BUTTON_DISABLE_MAX_HEIGHT_SIZE.XL],
-  labelHeight: 24,
-  fontSize: 20,
-  marginTop: 2,
-  pillBorderRadius: 28,
-  spinnerSize: 28,
-  gap: 6,
-};
-
-const expectedLegacyDisableMaxHeightStylesXXL = {
-  APMHeight: 38,
-  applePayHeight: 57,
-  buttonHeight: 65,
-  disableHeightStyle:
-    BUTTON_DISABLE_MAX_HEIGHT_STYLE[BUTTON_DISABLE_MAX_HEIGHT_SIZE.XXL],
-  labelHeight: 28,
-  fontSize: 23,
-  marginTop: 2,
-  pillBorderRadius: 33,
-  spinnerSize: 33,
-  gap: 7,
-};
-
-const expectedLegacyDisableMaxHeightStylesXXXL = {
-  APMHeight: 43,
-  applePayHeight: 65,
-  buttonHeight: 75,
-  disableHeightStyle:
-    BUTTON_DISABLE_MAX_HEIGHT_STYLE[BUTTON_DISABLE_MAX_HEIGHT_SIZE.XXXL],
-  labelHeight: 32,
-  fontSize: 27,
-  marginTop: 3,
-  pillBorderRadius: 38,
-  spinnerSize: 38,
-  gap: 7,
-};
-
-// expected shouldResizeLabel = true style variables for disable max height
-const expectedResizeLabelDisableMaxHeightStylesTiny = {
-  APMHeight: 18,
-  applePayHeight: 25,
-  buttonHeight: 25,
-  disableHeightStyle:
-    BUTTON_DISABLE_MAX_HEIGHT_STYLE[BUTTON_DISABLE_MAX_HEIGHT_SIZE.TINY],
-  labelHeight: 14,
-  fontSize: 10,
-  marginTop: 1,
-  pillBorderRadius: 13,
-  spinnerSize: 13,
-  gap: 3,
-};
-
-const expectedResizeLabelDisableMaxHeightStylesSmall = {
-  APMHeight: 20,
-  applePayHeight: 29,
-  buttonHeight: 30,
-  disableHeightStyle:
-    BUTTON_DISABLE_MAX_HEIGHT_STYLE[BUTTON_DISABLE_MAX_HEIGHT_SIZE.SMALL],
-  labelHeight: 16,
-  fontSize: 10,
-  marginTop: 1,
-  pillBorderRadius: 15,
-  spinnerSize: 15,
-  gap: 3,
-};
-
-const expectedResizeLabelDisableMaxHeightStylesMediumSmall = {
-  APMHeight: 23,
-  applePayHeight: 33,
-  buttonHeight: 35,
-  disableHeightStyle:
-    BUTTON_DISABLE_MAX_HEIGHT_STYLE[
-      BUTTON_DISABLE_MAX_HEIGHT_SIZE.MEDIUM_SMALL
-    ],
-  labelHeight: 16,
-  fontSize: 11,
-  marginTop: 1,
-  pillBorderRadius: 18,
-  spinnerSize: 18,
-  gap: 4,
-};
-
-const expectedResizeLabelDisableMaxHeightStylesMediumBig = {
-  APMHeight: 25,
-  applePayHeight: 37,
-  buttonHeight: 40,
-  disableHeightStyle:
-    BUTTON_DISABLE_MAX_HEIGHT_STYLE[BUTTON_DISABLE_MAX_HEIGHT_SIZE.MEDIUM_BIG],
-  labelHeight: 18,
-  fontSize: 13,
-  marginTop: 1,
-  pillBorderRadius: 20,
-  spinnerSize: 20,
-  gap: 4,
-};
-
-const expectedResizeLabelDisableMaxHeightStylesLargeSmall = {
-  APMHeight: 28,
-  applePayHeight: 41,
-  buttonHeight: 45,
-  disableHeightStyle:
-    BUTTON_DISABLE_MAX_HEIGHT_STYLE[BUTTON_DISABLE_MAX_HEIGHT_SIZE.LARGE_SMALL],
-  labelHeight: 20,
-  fontSize: 14,
-  marginTop: 1,
-  pillBorderRadius: 23,
-  spinnerSize: 23,
-  gap: 5,
-};
-
-const expectedResizeLabelDisableMaxHeightStylesLargeBig = {
-  APMHeight: 30,
-  applePayHeight: 45,
-  buttonHeight: 50,
-  disableHeightStyle:
-    BUTTON_DISABLE_MAX_HEIGHT_STYLE[BUTTON_DISABLE_MAX_HEIGHT_SIZE.LARGE_BIG],
-  labelHeight: 22,
-  fontSize: 16,
-  marginTop: 2,
-  pillBorderRadius: 25,
-  spinnerSize: 25,
-  gap: 5,
-};
-
-const expectedResizeLabelDisableMaxHeightStylesXL = {
-  APMHeight: 33,
-  applePayHeight: 49,
-  buttonHeight: 55,
-  disableHeightStyle:
-    BUTTON_DISABLE_MAX_HEIGHT_STYLE[BUTTON_DISABLE_MAX_HEIGHT_SIZE.XL],
-  labelHeight: 24,
-  fontSize: 18,
-  marginTop: 2,
-  pillBorderRadius: 28,
-  spinnerSize: 28,
-  gap: 6,
-};
-
-const expectedResizeLabelDisableMaxHeightStylesXXL = {
-  APMHeight: 38,
-  applePayHeight: 57,
-  buttonHeight: 65,
-  disableHeightStyle:
-    BUTTON_DISABLE_MAX_HEIGHT_STYLE[BUTTON_DISABLE_MAX_HEIGHT_SIZE.XXL],
-  labelHeight: 26,
-  fontSize: 21,
-  marginTop: 2,
-  pillBorderRadius: 33,
-  spinnerSize: 33,
-  gap: 7,
-};
-
-const expectedResizeLabelDisableMaxHeightStylesXXXL = {
-  APMHeight: 43,
-  applePayHeight: 65,
-  buttonHeight: 75,
-  disableHeightStyle:
-    BUTTON_DISABLE_MAX_HEIGHT_STYLE[BUTTON_DISABLE_MAX_HEIGHT_SIZE.XXXL],
-  labelHeight: 30,
-  fontSize: 24,
-  marginTop: 2,
-  pillBorderRadius: 38,
-  spinnerSize: 38,
-  gap: 7,
-};
-
-// expected rebrand disable max height responsive styles variables
-const expectedRebrandDisableMaxHeightStylesTiny = {
-  APMHeight: 18,
-  applePayHeight: 25,
-  buttonHeight: 25,
-  disableHeightStyle:
-    BUTTON_DISABLE_MAX_HEIGHT_STYLE[BUTTON_DISABLE_MAX_HEIGHT_SIZE.TINY],
-  labelHeight: 13,
-  fontSize: 10,
-  marginTop: 1,
-  spinnerSize: 13,
-  gap: 3,
-};
-
-const expectedRebrandDisableMaxHeightStylesSmall = {
-  APMHeight: 20,
-  applePayHeight: 29,
-  buttonHeight: 30,
-  disableHeightStyle:
-    BUTTON_DISABLE_MAX_HEIGHT_STYLE[BUTTON_DISABLE_MAX_HEIGHT_SIZE.SMALL],
-  labelHeight: 15,
-  fontSize: 11,
-  marginTop: 1,
-  spinnerSize: 15,
-  gap: 3,
-};
-
-const expectedRebrandDisableMaxHeightStylesMediumSmall = {
-  APMHeight: 23,
-  applePayHeight: 33,
-  buttonHeight: 35,
-  disableHeightStyle:
-    BUTTON_DISABLE_MAX_HEIGHT_STYLE[
-      BUTTON_DISABLE_MAX_HEIGHT_SIZE.MEDIUM_SMALL
-    ],
-  labelHeight: 18,
-  fontSize: 13,
-  marginTop: 1,
-  spinnerSize: 18,
-  gap: 4,
-};
-
-const expectedRebrandDisableMaxHeightStylesMediumBig = {
-  APMHeight: 25,
-  applePayHeight: 37,
-  buttonHeight: 40,
-  disableHeightStyle:
-    BUTTON_DISABLE_MAX_HEIGHT_STYLE[BUTTON_DISABLE_MAX_HEIGHT_SIZE.MEDIUM_BIG],
-  labelHeight: 20,
-  fontSize: 14,
-  marginTop: 1,
-  spinnerSize: 20,
-  gap: 4,
-};
-
-const expectedRebrandDisableMaxHeightStylesLargeSmall = {
-  APMHeight: 28,
-  applePayHeight: 41,
-  buttonHeight: 45,
-  disableHeightStyle:
-    BUTTON_DISABLE_MAX_HEIGHT_STYLE[BUTTON_DISABLE_MAX_HEIGHT_SIZE.LARGE_SMALL],
-  labelHeight: 23,
-  fontSize: 16,
-  marginTop: 2,
-  spinnerSize: 23,
-  gap: 5,
-};
-
-const expectedRebrandDisableMaxHeightStylesLargeBig = {
-  APMHeight: 30,
-  applePayHeight: 45,
-  buttonHeight: 50,
-  disableHeightStyle:
-    BUTTON_DISABLE_MAX_HEIGHT_STYLE[BUTTON_DISABLE_MAX_HEIGHT_SIZE.LARGE_BIG],
-  labelHeight: 25,
-  fontSize: 18,
-  marginTop: 2,
-  spinnerSize: 25,
-  gap: 5,
-};
-
-const expectedRebrandDisableMaxHeightStylesXL = {
-  APMHeight: 33,
-  applePayHeight: 49,
-  buttonHeight: 55,
-  disableHeightStyle:
-    BUTTON_DISABLE_MAX_HEIGHT_STYLE[BUTTON_DISABLE_MAX_HEIGHT_SIZE.XL],
-  labelHeight: 28,
-  fontSize: 20,
-  marginTop: 2,
-  spinnerSize: 28,
-  gap: 6,
-};
-
-const expectedRebrandDisableMaxHeightStylesXXL = {
-  APMHeight: 38,
-  applePayHeight: 57,
-  buttonHeight: 65,
-  disableHeightStyle:
-    BUTTON_DISABLE_MAX_HEIGHT_STYLE[BUTTON_DISABLE_MAX_HEIGHT_SIZE.XXL],
-  labelHeight: 33,
-  fontSize: 23,
-  marginTop: 2,
-  spinnerSize: 33,
-  gap: 7,
-};
-
-const expectedRebrandDisableMaxHeightStylesXXXL = {
-  APMHeight: 43,
-  applePayHeight: 65,
-  buttonHeight: 75,
-  disableHeightStyle:
-    BUTTON_DISABLE_MAX_HEIGHT_STYLE[BUTTON_DISABLE_MAX_HEIGHT_SIZE.XXXL],
-  labelHeight: 38,
-  fontSize: 27,
-  marginTop: 3,
-  spinnerSize: 38,
-  gap: 7,
-};
-
-// expected rebrand responsive styles variables
-const expectedRebrandedResponsiveStylesExtraSmall = {
-  style: BUTTON_REDESIGN_STYLE[BUTTON_REDESIGN_SIZE.EXTRA_SMALL],
-  buttonHeight: 20,
-  gap: 3,
-  defaultHeight: 20,
-  minHeight: 20,
-  maxHeight: 30,
-  minWidth: 50,
-  minDualWidth: 300,
-  maxWidth: 75,
-  fontSize: 10,
-};
-
-const expectedRebrandedResponsiveStylesTiny = {
-  style: BUTTON_REDESIGN_STYLE[BUTTON_REDESIGN_SIZE.TINY],
-  buttonHeight: 25,
-  gap: 3,
-  defaultHeight: 25,
-  minHeight: 25,
-  maxHeight: 30,
-  minWidth: 75,
-  minDualWidth: 300,
-  maxWidth: 200,
-  fontSize: 10,
-};
-
-const expectedRebrandedResponsiveStylesSmall = {
-  style: BUTTON_REDESIGN_STYLE[BUTTON_REDESIGN_SIZE.SMALL],
-  buttonHeight: 35,
-  gap: 4,
-  defaultHeight: 35,
-  minHeight: 30,
-  maxHeight: 35,
-  minWidth: 200,
-  minDualWidth: 300,
-  maxWidth: 250,
-  fontSize: 12,
-};
-
-const expectedRebrandedResponsiveStylesMediumSmall = {
-  style: BUTTON_REDESIGN_STYLE[BUTTON_REDESIGN_SIZE.MEDIUM_SMALL],
-  buttonHeight: 35,
-  gap: 4,
-  defaultHeight: 35,
-  minHeight: 35,
-  maxHeight: 40,
-  minWidth: 250,
-  minDualWidth: 300,
-  maxWidth: 300,
-  fontSize: 14,
-};
-
-const expectedRebrandedResponsiveStylesMediumBig = {
-  style: BUTTON_REDESIGN_STYLE[BUTTON_REDESIGN_SIZE.MEDIUM_BIG],
-  buttonHeight: 45,
-  gap: 5,
-  defaultHeight: 45,
-  minHeight: 40,
-  maxHeight: 45,
-  minWidth: 300,
-  minDualWidth: 300,
-  maxWidth: 350,
-  fontSize: 14,
-};
-
-const expectedRebrandedResponsiveStylesLargeSmall = {
-  style: BUTTON_REDESIGN_STYLE[BUTTON_REDESIGN_SIZE.LARGE_SMALL],
-  buttonHeight: 45,
-  gap: 5,
-  defaultHeight: 45,
-  minHeight: 45,
-  maxHeight: 50,
-  minWidth: 350,
-  minDualWidth: 300,
-  maxWidth: 425,
-  fontSize: 16,
-};
-
-const expectedRebrandedResponsiveStylesLargeBig = {
-  style: BUTTON_REDESIGN_STYLE[BUTTON_REDESIGN_SIZE.LARGE_BIG],
-  buttonHeight: 50,
-  gap: 5,
-  defaultHeight: 50,
-  minHeight: 50,
-  maxHeight: 55,
-  minWidth: 425,
-  minDualWidth: 300,
-  maxWidth: 500,
-  fontSize: 18,
-};
-
-const expectedRebrandedResponsiveStylesXlSmall = {
-  style: BUTTON_REDESIGN_STYLE[BUTTON_REDESIGN_SIZE.XL_SMALL],
-  buttonHeight: 55,
-  gap: 6,
-  defaultHeight: 55,
-  minHeight: 55,
-  maxHeight: 60,
-  minWidth: 500,
-  minDualWidth: 300,
-  maxWidth: 750,
-  fontSize: 18,
-};
+import {
+  // Legacy Responsive Styles
+  expectedLegacyResponsiveStylesTiny,
+  expectedLegacyResponsiveStylesSmall,
+  expectedLegacyResponsiveStylesMedium,
+  expectedLegacyResponsiveStylesLarge,
+  expectedLegacyResponsiveStylesHuge,
+  // Resize Label Responsive Styles
+  expectedResizeLabelResponsiveStylesTiny,
+  expectedResizeLabelResponsiveStylesSmall,
+  expectedResizeLabelResponsiveStylesMedium,
+  expectedResizeLabelResponsiveStylesLarge,
+  expectedResizeLabelResponsiveStylesHuge,
+  // Legacy Disable Max Height Styles
+  expectedLegacyDisableMaxHeightStylesTiny,
+  expectedLegacyDisableMaxHeightStylesSmall,
+  expectedLegacyDisableMaxHeightStylesMediumSmall,
+  expectedLegacyDisableMaxHeightStylesMediumBig,
+  expectedLegacyDisableMaxHeightStylesLargeSmall,
+  expectedLegacyDisableMaxHeightStylesLargeBig,
+  expectedLegacyDisableMaxHeightStylesXL,
+  expectedLegacyDisableMaxHeightStylesXXL,
+  expectedLegacyDisableMaxHeightStylesXXXL,
+  // Resize Label Disable Max Height Styles
+  expectedResizeLabelDisableMaxHeightStylesTiny,
+  expectedResizeLabelDisableMaxHeightStylesSmall,
+  expectedResizeLabelDisableMaxHeightStylesMediumSmall,
+  expectedResizeLabelDisableMaxHeightStylesMediumBig,
+  expectedResizeLabelDisableMaxHeightStylesLargeSmall,
+  expectedResizeLabelDisableMaxHeightStylesLargeBig,
+  expectedResizeLabelDisableMaxHeightStylesXL,
+  expectedResizeLabelDisableMaxHeightStylesXXL,
+  expectedResizeLabelDisableMaxHeightStylesXXXL,
+  // Rebrand Disable Max Height Styles
+  expectedRebrandDisableMaxHeightStylesTiny,
+  expectedRebrandDisableMaxHeightStylesSmall,
+  expectedRebrandDisableMaxHeightStylesMediumSmall,
+  expectedRebrandDisableMaxHeightStylesMediumBig,
+  expectedRebrandDisableMaxHeightStylesLargeSmall,
+  expectedRebrandDisableMaxHeightStylesLargeBig,
+  expectedRebrandDisableMaxHeightStylesXL,
+  expectedRebrandDisableMaxHeightStylesXXL,
+  expectedRebrandDisableMaxHeightStylesXXXL,
+  // Rebranded Responsive Styles
+  expectedRebrandedResponsiveStylesExtraSmall,
+  expectedRebrandedResponsiveStylesTiny,
+  expectedRebrandedResponsiveStylesSmall,
+  expectedRebrandedResponsiveStylesMediumSmall,
+  expectedRebrandedResponsiveStylesMediumBig,
+  expectedRebrandedResponsiveStylesLargeSmall,
+  expectedRebrandedResponsiveStylesLargeBig,
+  expectedRebrandedResponsiveStylesXlSmall,
+} from "./styleUtils.test.constants";
 
 describe("test responsive style variables for legacy", () => {
   const shouldApplyRebrandedStyles = false;
@@ -705,6 +156,67 @@ describe("test responsive style variables when shouldResizeLabel == true", () =>
     }
   );
 });
+
+// Separate describe block needed because JavaScript objects cannot have multiple values for paylater.variant
+// AT and DE both use German labels and trigger shouldResizeLabel, but backend returns distinct variants
+describe("test responsive style variables when shouldResizeLabel == true for Austria variant", () => {
+  const shouldApplyRebrandedStyles = false;
+
+  const fundingEligibility = {
+    paypal: {
+      eligible: true,
+      branded: undefined,
+    },
+    paylater: {
+      eligible: true,
+      products: {
+        paylater: {
+          variant: "AT",
+        },
+        payIn3: {
+          variant: null,
+        },
+        payIn4: {
+          variant: null,
+        },
+      },
+    },
+  };
+  test.each([
+    {
+      input: BUTTON_SIZE.TINY,
+      expected: expectedResizeLabelResponsiveStylesTiny,
+    },
+    {
+      input: BUTTON_SIZE.SMALL,
+      expected: expectedResizeLabelResponsiveStylesSmall,
+    },
+    {
+      input: BUTTON_SIZE.MEDIUM,
+      expected: expectedResizeLabelResponsiveStylesMedium,
+    },
+    {
+      input: BUTTON_SIZE.LARGE,
+      expected: expectedResizeLabelResponsiveStylesLarge,
+    },
+    {
+      input: BUTTON_SIZE.HUGE,
+      expected: expectedResizeLabelResponsiveStylesHuge,
+    },
+  ])(
+    `should return responsive styles for size $input with AT variant`,
+    ({ input, expected }) => {
+      expect(
+        getResponsiveStyleVariables({
+          fundingEligibility,
+          shouldApplyRebrandedStyles,
+          size: input,
+        })
+      ).toEqual(expected);
+    }
+  );
+});
+
 describe("test responsive style variables for rebranded buttons", () => {
   test.each([
     {
@@ -884,6 +396,82 @@ describe("test responsive style variables when shouldResizeLabel == true for dis
   );
 });
 
+// Separate describe block needed because JavaScript objects cannot have multiple values for paylater.variant
+// AT and DE both use German labels and trigger shouldResizeLabel, but backend returns distinct variants
+describe("test responsive style variables when shouldResizeLabel == true for disable max height with Austria variant", () => {
+  const shouldApplyRebrandedStyles = false;
+
+  const fundingEligibility = {
+    paypal: {
+      eligible: true,
+      branded: undefined,
+    },
+    paylater: {
+      eligible: true,
+      products: {
+        paylater: {
+          variant: "AT",
+        },
+        payIn3: {
+          variant: null,
+        },
+        payIn4: {
+          variant: null,
+        },
+      },
+    },
+  };
+  test.each([
+    {
+      input: BUTTON_DISABLE_MAX_HEIGHT_SIZE.TINY,
+      expected: expectedResizeLabelDisableMaxHeightStylesTiny,
+    },
+    {
+      input: BUTTON_DISABLE_MAX_HEIGHT_SIZE.SMALL,
+      expected: expectedResizeLabelDisableMaxHeightStylesSmall,
+    },
+    {
+      input: BUTTON_DISABLE_MAX_HEIGHT_SIZE.MEDIUM_SMALL,
+      expected: expectedResizeLabelDisableMaxHeightStylesMediumSmall,
+    },
+    {
+      input: BUTTON_DISABLE_MAX_HEIGHT_SIZE.MEDIUM_BIG,
+      expected: expectedResizeLabelDisableMaxHeightStylesMediumBig,
+    },
+    {
+      input: BUTTON_DISABLE_MAX_HEIGHT_SIZE.LARGE_SMALL,
+      expected: expectedResizeLabelDisableMaxHeightStylesLargeSmall,
+    },
+    {
+      input: BUTTON_DISABLE_MAX_HEIGHT_SIZE.LARGE_BIG,
+      expected: expectedResizeLabelDisableMaxHeightStylesLargeBig,
+    },
+    {
+      input: BUTTON_DISABLE_MAX_HEIGHT_SIZE.XL,
+      expected: expectedResizeLabelDisableMaxHeightStylesXL,
+    },
+    {
+      input: BUTTON_DISABLE_MAX_HEIGHT_SIZE.XXL,
+      expected: expectedResizeLabelDisableMaxHeightStylesXXL,
+    },
+    {
+      input: BUTTON_DISABLE_MAX_HEIGHT_SIZE.XXXL,
+      expected: expectedResizeLabelDisableMaxHeightStylesXXXL,
+    },
+  ])(
+    `should return responsive styles for disable max height size $input with AT variant`,
+    ({ input, expected }) => {
+      expect(
+        getDisableMaxHeightResponsiveStyleVariables({
+          fundingEligibility,
+          shouldApplyRebrandedStyles,
+          disableMaxHeightSize: input,
+        })
+      ).toEqual(expected);
+    }
+  );
+});
+
 describe("test rebrand responsive style variables for disable max height", () => {
   const shouldApplyRebrandedStyles = true;