From e3502f7614a15f8e7bbe7f3aef18c8fbb9d759bb Mon Sep 17 00:00:00 2001
From: Owen Yamauchi <owen@rewiringamerica.org>
Date: Tue, 15 Aug 2023 16:58:52 -0400
Subject: [PATCH] Hoist the form header out of the form component (#14)

The header text isn't part of the calculator form, semantically. It
will also need to be customizable for state-specific calcs.

## Test Plan

Looks exactly the same as before in a browser. Cypress tests pass.
---
 src/calculator-form.ts | 208 ++++++++++++++++++++---------------------
 src/calculator.ts      |  27 +++---
 2 files changed, 117 insertions(+), 118 deletions(-)

diff --git a/src/calculator-form.ts b/src/calculator-form.ts
index 21f6704..4c1cbb6 100644
--- a/src/calculator-form.ts
+++ b/src/calculator-form.ts
@@ -76,111 +76,107 @@ export const formTemplate = (
   [zip, ownerStatus, householdIncome, taxFiling, householdSize]: Array<string>,
   onSubmit: (e: SubmitEvent) => void,
 ) => html`
-  <div class="card card-content">
-    <h1>How much money will you get with the Inflation Reduction Act?</h1>
-    <form @submit=${onSubmit}>
-      <div class="grid-3-2">
-        <div>
-          <label for="zip">
-            Zip
-            <sl-tooltip
-              content="Your zip code helps determine the amount of discounts and tax credits you qualify for."
-              hoist
-              >${questionIcon(18, 18)}</sl-tooltip
-            ><br />
-            <input
-              tabindex="0"
-              id="zip"
-              placeholder="12345"
-              name="zip"
-              required
-              type="text"
-              value="${zip}"
-              minlength="5"
-              maxlength="5"
-              inputmode="numeric"
-              pattern="[0-9]{5}"
-            />
-          </label>
-        </div>
-        <div>
-          <label for="owner_status">
-            Homeowners Status
-            <sl-tooltip
-              content="Homeowners and renters qualify for different incentives."
-              hoist
-              >${questionIcon(18, 18)}</sl-tooltip
-            ><br />
-            ${select({
-              id: 'owner_status',
-              required: true,
-              options: OWNER_STATUS_OPTIONS,
-              currentValue: ownerStatus,
-              tabIndex: 0,
-            })}
-          </label>
-        </div>
-        <div>
-          <label for="household_income">
-            Household Income
-            <sl-tooltip
-              content="Enter your gross income (income before taxes). Include wages and salary plus other forms of income, including pensions, interest, dividends, and rental income. If you are married and file jointly, include your spouse's income"
-              hoist
-              >${questionIcon(18, 18)}</sl-tooltip
-            ><br />
-            <ra-currency-input
-              id="household_income"
-              placeholder="$60,000"
-              name="household_income"
-              required
-              value=${householdIncome}
-              min="0"
-              max="100000000"
-            ></ra-currency-input>
-          </label>
-        </div>
-        <div>
-          <label for="tax_filing">
-            Tax Filing
-            <sl-tooltip hoist
-              ><div slot="content">
-                Select "Head of Household" if you have a child or relative
-                living with you, and you pay more than half the costs of your
-                home. Select "Joint" if you file your taxes as a married
-                couple."
-              </div>
-              ${questionIcon(18, 18)}</sl-tooltip
-            ><br />
-            ${select({
-              id: 'tax_filing',
-              required: true,
-              options: TAX_FILING_OPTIONS,
-              currentValue: taxFiling,
-              tabIndex: 0,
-            })}
-          </label>
-        </div>
-        <div>
-          <label for="household_size">
-            Household Size
-            <sl-tooltip
-              content="Include anyone you live with who you claim as a dependent on your taxes, and your spouse or partner if you file taxes together."
-              hoist
-              >${questionIcon(18, 18)}</sl-tooltip
-            ><br />
-            ${select({
-              id: 'household_size',
-              required: true,
-              options: HOUSEHOLD_SIZE_OPTIONS,
-              currentValue: householdSize,
-              tabIndex: 0,
-            })}
-          </label>
-        </div>
-        <div>
-          <button type="submit">Calculate! ${downIcon(18, 18)}</button>
-        </div>
+  <form @submit=${onSubmit}>
+    <div class="grid-3-2">
+      <div>
+        <label for="zip">
+          Zip
+          <sl-tooltip
+            content="Your zip code helps determine the amount of discounts and tax credits you qualify for."
+            hoist
+            >${questionIcon(18, 18)}</sl-tooltip
+          ><br />
+          <input
+            tabindex="0"
+            id="zip"
+            placeholder="12345"
+            name="zip"
+            required
+            type="text"
+            value="${zip}"
+            minlength="5"
+            maxlength="5"
+            inputmode="numeric"
+            pattern="[0-9]{5}"
+          />
+        </label>
       </div>
-    </form>
-  </div>
+      <div>
+        <label for="owner_status">
+          Homeowners Status
+          <sl-tooltip
+            content="Homeowners and renters qualify for different incentives."
+            hoist
+            >${questionIcon(18, 18)}</sl-tooltip
+          ><br />
+          ${select({
+            id: 'owner_status',
+            required: true,
+            options: OWNER_STATUS_OPTIONS,
+            currentValue: ownerStatus,
+            tabIndex: 0,
+          })}
+        </label>
+      </div>
+      <div>
+        <label for="household_income">
+          Household Income
+          <sl-tooltip
+            content="Enter your gross income (income before taxes). Include wages and salary plus other forms of income, including pensions, interest, dividends, and rental income. If you are married and file jointly, include your spouse's income"
+            hoist
+            >${questionIcon(18, 18)}</sl-tooltip
+          ><br />
+          <ra-currency-input
+            id="household_income"
+            placeholder="$60,000"
+            name="household_income"
+            required
+            value=${householdIncome}
+            min="0"
+            max="100000000"
+          ></ra-currency-input>
+        </label>
+      </div>
+      <div>
+        <label for="tax_filing">
+          Tax Filing
+          <sl-tooltip hoist
+            ><div slot="content">
+              Select "Head of Household" if you have a child or relative living
+              with you, and you pay more than half the costs of your home.
+              Select "Joint" if you file your taxes as a married couple."
+            </div>
+            ${questionIcon(18, 18)}</sl-tooltip
+          ><br />
+          ${select({
+            id: 'tax_filing',
+            required: true,
+            options: TAX_FILING_OPTIONS,
+            currentValue: taxFiling,
+            tabIndex: 0,
+          })}
+        </label>
+      </div>
+      <div>
+        <label for="household_size">
+          Household Size
+          <sl-tooltip
+            content="Include anyone you live with who you claim as a dependent on your taxes, and your spouse or partner if you file taxes together."
+            hoist
+            >${questionIcon(18, 18)}</sl-tooltip
+          ><br />
+          ${select({
+            id: 'household_size',
+            required: true,
+            options: HOUSEHOLD_SIZE_OPTIONS,
+            currentValue: householdSize,
+            tabIndex: 0,
+          })}
+        </label>
+      </div>
+      <div>
+        <button type="submit">Calculate! ${downIcon(18, 18)}</button>
+      </div>
+    </div>
+  </form>
 `;
diff --git a/src/calculator.ts b/src/calculator.ts
index b8c80da..edaf7e5 100644
--- a/src/calculator.ts
+++ b/src/calculator.ts
@@ -144,18 +144,21 @@ export class RewiringAmericaCalculator extends LitElement {
   override render() {
     return html`
       <div class="calculator">
-        ${this.hideForm
-          ? nothing
-          : formTemplate(
-              [
-                this.zip,
-                this.ownerStatus,
-                this.householdIncome,
-                this.taxFiling,
-                this.householdSize,
-              ],
-              (event: SubmitEvent) => this.submit(event),
-            )}
+        <div class="card card-content">
+          <h1>How much money will you get with the Inflation Reduction Act?</h1>
+          ${this.hideForm
+            ? nothing
+            : formTemplate(
+                [
+                  this.zip,
+                  this.ownerStatus,
+                  this.householdIncome,
+                  this.taxFiling,
+                  this.householdSize,
+                ],
+                (event: SubmitEvent) => this.submit(event),
+              )}
+        </div>
         ${this.hideResult
           ? nothing
           : html`