Tp 2543 change where the button is on forms (#163)

* TP-2543-change-where-the-button-is-on-forms
awell-health · Oct 18, 2024 · 212813d · 212813d
1 parent 1cfdcea
commit 212813d
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 31 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@awell-health/ui-library",
-  "version": "0.1.72",
+  "version": "0.1.73",
   "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
@@ -114,28 +114,26 @@ export const TraditionalForm = ({
         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>
+      <HostedPageFooter showScrollHint={false} fixPosition={true}>
+        <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>
   )
 }
diff --git a/src/hostedPages/activities/form/form.module.scss b/src/hostedPages/activities/form/form.module.scss
@@ -109,10 +109,3 @@
   pointer-events: none; /* Prevent interaction */
   transition: top 0.5s ease-in-out;
 }
-
-.footer_for_traditional_form {
-  width: 100%;
-  position: fixed; 
-  bottom: 0; 
-  left: 0;
-}
diff --git a/src/hostedPages/layouts/HostedPageLayout/HostedPageFooter/HostedPageFooter.tsx b/src/hostedPages/layouts/HostedPageLayout/HostedPageFooter/HostedPageFooter.tsx
@@ -5,14 +5,20 @@ import classes from './hostedPageFooter.module.scss'
 export interface HostedPageFooterProps {
   children: React.ReactNode | string
   showScrollHint?: boolean
+  fixPosition?: boolean
 }
 
 export const HostedPageFooter: FC<HostedPageFooterProps> = ({
   children,
   showScrollHint = false,
+  fixPosition = false,
 }) => {
+  const footerClass = fixPosition
+    ? `${classes.footer} ${classes.fixed}`
+    : classes.footer
+
   return (
-    <footer className={classes.footer}>
+    <footer className={footerClass}>
       <div
         className={`${classes.scrollHint} ${
           showScrollHint ? classes.visible : classes.hidden

diff --git a/src/hostedPages/layouts/HostedPageLayout/HostedPageFooter/hostedPageFooter.module.scss b/src/hostedPages/layouts/HostedPageLayout/HostedPageFooter/hostedPageFooter.module.scss
@@ -13,6 +13,12 @@
     height: var(--awell-footer-height);
   }
 
+  &.fixed {
+    position: fixed; 
+    bottom: 0; 
+    left: 0;
+  }
+
   & .scrollHint {
     position: absolute;
     bottom: var(--awell-mobile-footer-height);