Skip to content

Commit

Permalink
Move form header outside component; customize for RI
Browse files Browse the repository at this point in the history
  • Loading branch information
@oyamauchi
oyamauchi committed Aug 8, 2023
1 parent 535954a commit b22c7c7
Show file tree
Hide file tree
Showing 3 changed files with 150 additions and 147 deletions.
213 changes: 105 additions & 108 deletions src/calculator-form.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -141,114 +141,111 @@ export const formTemplate = (
: nothing;

return 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}"
@change=${onZipChanged}
/>
</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>
${projectsField} ${utilityField}
<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}"
@change=${onZipChanged}
/>
</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>
${projectsField} ${utilityField}
<div>
<button type="submit">Calculate! ${downIcon(18, 18)}</button>
</div>
</div>
</form>
`;
};
35 changes: 19 additions & 16 deletions src/calculator.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -144,22 +144,25 @@ 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,
],
false,
false,
[],
(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,
],
false,
false,
[],
(event: SubmitEvent) => this.submit(event),
() => {},
)}
</div>
${this.hideResult
? nothing
: html`
Expand Down
49 changes: 26 additions & 23 deletions src/state-calculator.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -178,29 +178,32 @@ export class RewiringAmericaStateCalculator extends LitElement {
override render() {
return html`
<div class="calculator">
${this.hideForm
? nothing
: formTemplate(
[
this.zip,
this.ownerStatus,
this.householdIncome,
this.taxFiling,
this.householdSize,
this.utility,
this.project,
],
true,
true,
this._utilityOptionsTask.render({
initial: () => [BLANK_UTILITY],
pending: () => [BLANK_UTILITY],
complete: a => [BLANK_UTILITY, ...a],
error: () => [BLANK_UTILITY],
}) as OptionParam[],
(event: SubmitEvent) => this.submit(event),
() => this._utilityOptionsTask.run(),
)}
<div class="card card-content">
<h1>Incentives available to you in Rhode Island</h1>
${this.hideForm
? nothing
: formTemplate(
[
this.zip,
this.ownerStatus,
this.householdIncome,
this.taxFiling,
this.householdSize,
this.utility,
this.project,
],
true,
true,
this._utilityOptionsTask.render({
initial: () => [BLANK_UTILITY],
pending: () => [BLANK_UTILITY],
complete: a => [BLANK_UTILITY, ...a],
error: () => [BLANK_UTILITY],
}) as OptionParam[],
(event: SubmitEvent) => this.submit(event),
() => this._utilityOptionsTask.run(),
)}
</div>
${this.hideResult
? nothing
: html`
Expand Down

0 comments on commit b22c7c7

Please sign in to comment.