TP-2543-change-where-the-button-is-on-forms (#162)

awell-health · Oct 17, 2024 · 1cfdcea · 1cfdcea
1 parent f4ca89a
commit 1cfdcea
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 26 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@awell-health/ui-library",
-  "version": "0.1.71",
+  "version": "0.1.72",
   "description": "UI components to integrate with Awell Health",
   "repository": {
     "type": "git",

diff --git a/src/hostedPages/activities/form/TraditionalForm.tsx b/src/hostedPages/activities/form/TraditionalForm.tsx
@@ -1,11 +1,10 @@
-import React, { useEffect } from 'react'
+import React, { useEffect, useRef } from 'react'
 import { Button, Text } from '../../../atoms'
 import classes from './form.module.scss'
 import { Question } from '../../../molecules'
 import { useTraditionalForm } from '../../../hooks/useForm'
 import layoutClasses from '../../layouts/HostedPageLayout/hostedPageLayout.module.scss'
 import { FormProps } from '../../../types/form'
-import { UserQuestionType } from '../../../types'
 import { useTheme } from '../../../atoms/themeProvider/ThemeProvider'
 import {
   LoadActivityPlaceholder,
@@ -23,6 +22,21 @@ export const TraditionalForm = ({
   autosaveAnswers = true,
   questionLabels,
 }: FormProps) => {
+  const scrollHintOverlayRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    const handleScroll = () => {
+      if (scrollHintOverlayRef.current) {
+        const { scrollTop, scrollHeight, clientHeight } =
+          document.documentElement
+        const isAtBottom = scrollTop + clientHeight >= scrollHeight
+        scrollHintOverlayRef.current.style.top = isAtBottom ? '100%' : 'auto'
+      }
+    }
+
+    window.addEventListener('scroll', handleScroll)
+    return () => window.removeEventListener('scroll', handleScroll)
+  }, [])
   const { updateLayoutMode, resetLayoutMode } = useTheme()
 
   const {
@@ -45,15 +59,14 @@ export const TraditionalForm = ({
 
   useEffect(() => {
     updateLayoutMode('flexible')
-
     return () => {
       // Reset to default mode on unmount
       resetLayoutMode()
     }
   }, [])
 
   return (
-    <>
+    <div>
       <main
         id="ahp_main_content_with_scroll_hint"
         className={`${layoutClasses.main_content} ${classes.traditional_form}`}
@@ -97,26 +110,32 @@ export const TraditionalForm = ({
           )}
         </div>
       </main>
-      <HostedPageFooter showScrollHint={false}>
-        <div className={`${classes.traditional_button_wrapper}`}>
-          {formHasErrors && (
-            <div>
-              <Text variant="textSmall" color="var(--awell-signalError100)">
-                {errorLabels.formHasErrors}
-              </Text>
-            </div>
-          )}
-          <div></div>
-          <Button
-            onClick={submitForm}
-            type="submit"
-            data-cy="submitFormButton"
-            disabled={isSubmittingForm}
-          >
-            {buttonLabels.submit}
-          </Button>
-        </div>
-      </HostedPageFooter>
-    </>
+      <div
+        ref={scrollHintOverlayRef}
+        className={classes.scroll_hint_overlay}
+      ></div>
+      <div className={classes.footer_for_traditional_for}>
+        <HostedPageFooter showScrollHint={false}>
+          <div className={classes.traditional_button_wrapper}>
+            {formHasErrors && (
+              <div>
+                <Text variant="textSmall" color="var(--awell-signalError100)">
+                  {errorLabels.formHasErrors}
+                </Text>
+              </div>
+            )}
+            <div></div>
+            <Button
+              onClick={submitForm}
+              type="submit"
+              data-cy="submitFormButton"
+              disabled={isSubmittingForm}
+            >
+              {buttonLabels.submit}
+            </Button>
+          </div>
+        </HostedPageFooter>
+      </div>
+    </div>
   )
 }
diff --git a/src/hostedPages/activities/form/form.module.scss b/src/hostedPages/activities/form/form.module.scss
@@ -97,3 +97,22 @@
     padding-top: var(--awell-spacing-4);
   }
 }
+
+/* Overlay for the opacity gradient */
+.scroll_hint_overlay {
+  position: fixed;
+  bottom: 50px;
+  left: 0;
+  width: 100%;
+  height: 70px;
+  background: linear-gradient(to bottom, transparent, var(--awell-neutralLight10) 100%);
+  pointer-events: none; /* Prevent interaction */
+  transition: top 0.5s ease-in-out;
+}
+
+.footer_for_traditional_form {
+  width: 100%;
+  position: fixed; 
+  bottom: 0; 
+  left: 0;
+}