feat(fixedFooterLayout): include footerScrollEffect prop (#1532)

https://jira.tid.es/browse/WEB-2432


https://www.figma.com/design/ncQ4GRI3ZEjEtNW6pyROX2/%F0%9F%94%B8-Layouts-Specs?node-id=2717-20348&t=hAPavuZ2V8Ucmp6W-4

Author: yceballost

src/__screenshot_tests__/__image_snapshots__/fixed-footer-screenshot-test-tsx-button-fixed-footer-layout-on-desktop-1-snap.png

@@ -33,17 +33,20 @@ const useTextLines = (): [Array<string>, () => void, () => void] => {
 
 export const FooterWithButtonsOnly: StoryComponent = () => {
     const [isFooterVisible, isFooterVisibleCheckbox] = useCheckbox('isFooterVisible', true);
+    const [footerScrollEffect, footerScrollEffectCheckbox] = useCheckbox('footerScrollEffect', true);
     const [textLines, loadMoreText, loadLessText] = useTextLines();
     return (
         <ButtonFixedFooterLayout
             button={<ButtonPrimary onPress={loadMoreText}>Load more text</ButtonPrimary>}
             secondaryButton={<ButtonSecondary onPress={loadLessText}>Load less text</ButtonSecondary>}
             isFooterVisible={isFooterVisible}
+            footerScrollEffect={footerScrollEffect}
         >
             <ResponsiveLayout>
                 <Box paddingY={16}>
                     <Stack space={16}>
                         {isFooterVisibleCheckbox}
+                        {footerScrollEffectCheckbox}
                         {textLines.map((line, idx) => (
                             <Text2 regular key={idx}>
                                 {line}
@@ -62,6 +65,7 @@ FooterWithButtonsOnly.parameters = {fullScreen: true};
 export const MoreComplexFooter: StoryComponent = () => {
     const [textLines, loadMoreText] = useTextLines();
     const [isFooterVisible, isFooterVisibleCheckbox] = useCheckbox('isFooterVisible', true);
+    const [footerScrollEffect, footerScrollEffectCheckbox] = useCheckbox('footerScrollEffect', true);
     return (
         <FixedFooterLayout
             footer={
@@ -77,10 +81,12 @@ export const MoreComplexFooter: StoryComponent = () => {
                 </ResponsiveLayout>
             }
             isFooterVisible={isFooterVisible}
+            footerScrollEffect={footerScrollEffect}
         >
             <ResponsiveLayout>
                 <Stack space={16}>
                     {isFooterVisibleCheckbox}
+                    {footerScrollEffectCheckbox}
                     <Text2 regular as="p">
                         When you need a more elaborated thing for your footer (not just buttons), you can use
                         FixedFooterLayout instead of ButtonFixedFooterLayout

src/__screenshot_tests__/__image_snapshots__/fixed-footer-screenshot-test-tsx-button-fixed-footer-layout-on-large-desktop-1-snap.png

@@ -16,6 +16,7 @@ type Props = {
     containerBgColor?: string;
     children: React.ReactNode;
     onChangeFooterHeight?: (heightInPx: number) => void;
+    footerScrollEffect?: boolean;
 };
 
 const ButtonFixedFooterLayout = ({
@@ -27,6 +28,7 @@ const ButtonFixedFooterLayout = ({
     footerBgColor,
     containerBgColor,
     onChangeFooterHeight,
+    footerScrollEffect,
 }: Props): JSX.Element => {
     const hasButton = !!button || !!secondaryButton;
     return (
@@ -35,6 +37,7 @@ const ButtonFixedFooterLayout = ({
             isFooterVisible={hasButton && isFooterVisible}
             footerBgColor={footerBgColor}
             containerBgColor={containerBgColor}
+            footerScrollEffect={footerScrollEffect}
             footer={
                 <InternalResponsiveLayout shouldExpandWhenNested="desktop">
                     <Box

src/__screenshot_tests__/__image_snapshots__/fixed-footer-screenshot-test-tsx-button-fixed-footer-layout-on-mobile-ios-1-snap.png

@@ -43,6 +43,11 @@ type Props = {
     containerBgColor?: string;
     children: React.ReactNode;
     onChangeFooterHeight?: (heightInPx: number) => void;
+    /**
+     * @default true
+     * When enabled an elevation will be displayed on the footer if it is fixed and there is scrollable content below it. Notice this layout is not fixed on Desktop.
+     */
+    footerScrollEffect?: boolean;
 };
 
 const MIN_AVAILABLE_HEIGHT_FOR_FIXED = 200;
@@ -56,6 +61,7 @@ const FixedFooterLayout = ({
     containerBgColor = vars.colors.background,
     children,
     onChangeFooterHeight,
+    footerScrollEffect = true,
 }: Props): JSX.Element => {
     const [displayElevation, setDisplayElevation] = React.useState(false);
     const containerRef = React.useRef<HTMLDivElement>(null);
@@ -80,7 +86,12 @@ const FixedFooterLayout = ({
          * There is no elevation in desktop devices and we don't display it in acceptance tests or when the
          * content's height is too small, so we avoid unnecesary calculations in these cases.
          */
-        if (!isTabletOrSmaller || isRunningAcceptanceTest(platformOverrides) || !isFooterFixed) {
+        if (
+            !footerScrollEffect ||
+            !isTabletOrSmaller ||
+            isRunningAcceptanceTest(platformOverrides) ||
+            !isFooterFixed
+        ) {
             setDisplayElevation(false);
             return;
         }
@@ -112,6 +123,7 @@ const FixedFooterLayout = ({
         platformOverrides,
         isTabletOrSmaller,
         isFooterFixed,
+        footerScrollEffect,
         // `topDistance` and `contentHeight` dependencies are needed to recalculate the elevation state
         topDistance,
         contentHeight,