Skip to content

Commit

Permalink
Hoist the form header out of the form component
Browse files Browse the repository at this point in the history 
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.
  • Loading branch information
@oyamauchi
oyamauchi committed Aug 15, 2023
1 parent 7fe81f7 commit 429ec85
Show file tree
Hide file tree
Showing 2 changed files with 117 additions and 118 deletions.
208 changes: 102 additions & 106 deletions src/calculator-form.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
`;
27 changes: 15 additions & 12 deletions src/calculator.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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`
Expand Down

0 comments on commit 429ec85

Please sign in to comment.