Display forms embedded inline within guides; remove "forms" link from main nav (#556)

Author: kydecker

.cursor/settings.json

@@ -6,7 +6,6 @@ const { pathname } = Astro.url;
 
 const navLinks = [
   { href: siteInfo.urls.guides, label: "Guides" },
-  { href: siteInfo.urls.forms, label: "Forms" },
   { href: siteInfo.urls.blog, label: "Blog" },
   { href: siteInfo.urls.donate, label: "Donate" },
 ];

src/components/Header.astro

@@ -3,9 +3,8 @@
   flex-direction: column;
   gap: var(--space-m);
   align-items: flex-start;
-  padding: var(--space-l);
-  border: 1px solid var(--border-color);
-  border-radius: var(--radius-m);
+  padding-block-end: var(--space-l);
+  border-block-end: 1px solid var(--border-color);
 }
 
 .delete-form-data-modal {

src/components/forms/DeleteFormDataModal/DeleteFormDataModal.css

@@ -3,7 +3,7 @@
   flex-direction: column;
   gap: var(--space-2xl);
   align-items: flex-start;
-  padding-block: var(--space-xl) var(--space-2xl);
+  padding-block-start: var(--space-xl);
 }
 
 .form-complete-step-header {

src/components/forms/FormCompleteStep/FormCompleteStep.css

@@ -12,22 +12,27 @@ export interface FormCompleteStepProps {
   slug: FormSlug;
   title: string;
   onRedownload: (e: React.SubmitEvent<HTMLFormElement>) => void | Promise<void>;
+  inline?: boolean;
+  headingLevel?: 1 | 2 | 3;
 }
 
 export function FormCompleteStep({
   slug,
   title,
   onRedownload,
+  inline = false,
+  headingLevel = 1,
 }: FormCompleteStepProps) {
   const [isDownloading, setIsDownloading] = useState(false);
 
   useEffect(() => {
+    if (inline) return;
     const previous = document.body.dataset.color;
     document.body.dataset.color = "green";
     return () => {
       document.body.dataset.color = previous ?? "";
     };
-  }, []);
+  }, [inline]);
 
   const handleSubmit = async (e: React.SubmitEvent<HTMLFormElement>) => {
     e.preventDefault();
@@ -49,7 +54,7 @@ export function FormCompleteStep({
   return (
     <section className="form-complete-step">
       <header className="form-complete-step-header">
-        <Heading level={1} className="form-complete-step-heading">
+        <Heading level={headingLevel} className="form-complete-step-heading">
           Form complete!
         </Heading>
         <p className="form-complete-step-description">

src/components/forms/FormCompleteStep/FormCompleteStep.tsx

@@ -3,13 +3,56 @@
   flex-direction: column;
   gap: var(--space-m);
   width: 100%;
-  min-height: 100dvh;
-  padding-block-end: var(--space-m);
+
+  &:not([data-inline]) {
+    min-height: 100dvh;
+    padding-block-end: var(--space-m);
+  }
 }
 
 .form-container-content {
   width: 100%;
-  padding-block-end: var(--space-xl);
+
+  .form-container:not([data-inline]) & {
+    padding-block-end: var(--space-xl);
+  }
+
+  .form-container[data-inline] & {
+    padding-inline: var(--space-xl);
+  }
+}
+
+.form-container[data-inline] {
+  .form-title-step {
+    padding-block: 0;
+  }
+
+  .form-navigation {
+    padding: var(--space-m);
+    padding-inline-end: var(--space-l);
+  }
+
+  .form-title-step-heading {
+    padding-block-start: var(--space-xl);
+    font-size: var(--step-3);
+  }
+
+  .form-title-step-description {
+    font-size: var(--step-1);
+  }
+
+  .form-complete-step {
+    padding-block: 0;
+  }
+
+  .form-complete-step-heading {
+    padding-block-start: var(--space-xl);
+    font-size: var(--step-3);
+  }
+
+  .form-complete-step-description {
+    font-size: var(--step-1);
+  }
 }
 
 .form-container-loading {

src/components/forms/FormContainer/FormContainer.css

@@ -39,6 +39,9 @@ export interface FormContainerProps {
 
   /** The costs associated with this form. */
   costs?: Costs | null;
+
+  /** Render inline within a page rather than as a full-page experience. */
+  inline?: boolean;
 }
 
 export function FormContainer({
@@ -49,6 +52,7 @@ export function FormContainer({
   updatedAt,
   pdfs,
   costs,
+  inline = false,
 }: FormContainerProps) {
   const config = getFormConfig(slug);
 
@@ -77,8 +81,16 @@ export function FormContainer({
   const [submitError, setSubmitError] = useState<string | null>(null);
 
   const scrollToFormTop = useCallback(() => {
-    containerRef.current?.scrollIntoView({ block: "start" });
-  }, []);
+    const el = containerRef.current;
+    if (!el) return;
+    if (inline) {
+      if (el.getBoundingClientRect().top < 0) {
+        el.scrollIntoView({ block: "start" });
+      }
+      return;
+    }
+    el.scrollIntoView({ block: "start" });
+  }, [inline]);
 
   const focusStepContent = useCallback(() => {
     requestAnimationFrame(() => {
@@ -162,6 +174,7 @@ export function FormContainer({
             updatedAt={updatedAt ?? ""}
             totalSteps={totalSteps}
             onStart={onStart}
+            headingLevel={inline ? 2 : 1}
           >
             {banner && (
               <Banner icon={RiMegaphoneLine}>
@@ -185,6 +198,8 @@ export function FormContainer({
             title={title}
             slug={config.slug}
             onRedownload={onSubmit}
+            inline={inline}
+            headingLevel={inline ? 2 : 1}
           />
         );
       default:
@@ -203,6 +218,7 @@ export function FormContainer({
     totalSteps,
     onStart,
     onSubmit,
+    inline,
   ]);
 
   const showNavigation = !["title", "complete"].includes(phase);
@@ -225,6 +241,7 @@ export function FormContainer({
     return (
       <section
         className="form-container form-container-loading"
+        data-inline={inline || undefined}
         ref={containerRef}
       >
         <ProgressCircle isIndeterminate aria-label="Loading form" size={40} />
@@ -235,7 +252,11 @@ export function FormContainer({
   return (
     <FormProvider {...form}>
       <FormStepContext.Provider value={stepContextValue}>
-        <section className="form-container" ref={containerRef}>
+        <section
+          className="form-container"
+          data-inline={inline || undefined}
+          ref={containerRef}
+        >
           {showNavigation && <FormNavigation />}
           <div className="form-container-content">{currentStepComponent}</div>
         </section>

src/components/forms/FormContainer/FormContainer.tsx

@@ -4,9 +4,8 @@
   gap: var(--space-l);
   align-items: stretch;
   width: 100%;
-  padding: var(--space-l);
-  border: 1px solid var(--border-color);
-  border-radius: var(--radius-m);
+  padding-block-end: var(--space-l);
+  border-block-end: 1px solid var(--border-color);
 }
 
 .form-feedback-success {

src/components/forms/FormFeedback/FormFeedback.css

@@ -6,24 +6,6 @@
   padding-block: var(--space-xl) var(--space-2xl);
 }
 
-.form-title-step-back-link {
-  display: flex;
-  gap: var(--space-2xs);
-  align-items: center;
-  padding-inline-end: var(--space-2xs);
-  margin-block-end: var(--space-s);
-  margin-inline-start: calc(-1 * var(--space-2xs));
-  font-size: var(--step-0);
-  color: var(--text-color);
-  text-decoration: none;
-
-  @media (hover: hover) {
-    &:hover {
-      text-decoration: underline;
-    }
-  }
-}
-
 .form-title-step-header {
   display: flex;
   flex-direction: column;
@@ -39,10 +21,6 @@
   color: var(--text-color);
   letter-spacing: var(--letter-spacing-condensed);
   text-wrap: balance;
-
-  @media (width < 700px) {
-    font-size: var(--step-5);
-  }
 }
 
 .form-title-step-description {
@@ -82,6 +60,19 @@
   grid-area: title;
 }
 
+.form-info-description {
+  grid-area: description;
+  font-size: var(--step--1);
+  font-weight: var(--weight-medium);
+  text-wrap: pretty;
+}
+
+.form-info-pdf-list {
+  padding-inline-start: var(--space-m);
+  margin: 0;
+  list-style-type: disc;
+}
+
 .form-title-step-footer {
   display: flex;
   flex-direction: column;
@@ -96,22 +87,9 @@
   }
 }
 
-.form-info-description {
-  grid-area: description;
-  font-size: var(--step--1);
-  font-weight: var(--weight-medium);
-  text-wrap: pretty;
-}
-
-.form-info-pdf-list {
-  padding-inline-start: var(--space-m);
-  margin: 0;
-  list-style-type: disc;
-}
-
 .form-title-step-date-updated {
   width: 100%;
-  padding-block: var(--space-s);
+  padding-block-start: var(--space-s);
   font-size: var(--step--1);
   text-wrap: pretty;
   border-top: 1px solid var(--border-color);

src/components/forms/FormTitleStep/FormTitleStep.css

@@ -1,6 +1,5 @@
 import {
   type RemixiconComponentType,
-  RiArrowLeftLine,
   RiArrowRightLine,
   RiFileCheckLine,
   RiShieldKeyholeLine,
@@ -9,13 +8,13 @@ import {
 import { useEffect, useState } from "react";
 import { type IBrowser, type IDevice, UAParser } from "ua-parser-js";
 import type { FormPdfMetadata } from "../../../forms/getFormPdfMetadata";
+import { formatBrowser } from "../../../utils/formatBrowser";
+import { formatDevice } from "../../../utils/formatDevice";
 import { formatTimeEstimate } from "../../../utils/formatTimeEstimate";
 import { smartquotes } from "../../../utils/smartquotes";
 import { Button } from "../../common/Button";
-import "./FormTitleStep.css";
-import { formatBrowser } from "../../../utils/formatBrowser";
-import { formatDevice } from "../../../utils/formatDevice";
 import { Heading } from "../../common/Content/Content";
+import "./FormTitleStep.css";
 
 const formatter = new Intl.DateTimeFormat("en-US", {
   dateStyle: "long",
@@ -49,40 +48,14 @@ function FormInfoItem({ icon: Icon, children }: FormInfoItemProps) {
 }
 
 export interface FormTitleStepProps {
-  /**
-   * The title of the form.
-   */
   title: string;
-
-  /**
-   * The description of the form.
-   */
   description?: string | null;
-
-  /**
-   * Child content.
-   */
   children?: React.ReactNode;
-
-  /**
-   * Handler for when the user clicks the start button.
-   */
   onStart: () => void;
-
-  /**
-   * The PDF metadata for forms that will be generated.
-   */
   pdfs: FormPdfMetadata[];
-
-  /**
-   * The total number of steps in the form.
-   */
   totalSteps: number;
-
-  /**
-   * The date the form was last updated.
-   */
   updatedAt: string;
+  headingLevel?: 1 | 2 | 3;
 }
 
 export function FormTitleStep({
@@ -93,6 +66,7 @@ export function FormTitleStep({
   pdfs,
   totalSteps,
   updatedAt,
+  headingLevel = 1,
 }: FormTitleStepProps) {
   const [device, setDevice] = useState<IDevice | null>(null);
   const [browser, setBrowser] = useState<IBrowser | null>(null);
@@ -108,10 +82,7 @@ export function FormTitleStep({
   return (
     <section className="form-title-step">
       <header className="form-title-step-header">
-        <a href="/forms" className="form-title-step-back-link">
-          <RiArrowLeftLine /> All forms
-        </a>
-        <Heading level={1} className="form-title-step-heading">
+        <Heading level={headingLevel} className="form-title-step-heading">
           {smartquotes(title)}
         </Heading>
         {description && (