diff --git a/src/api/calculator-types-v1.ts b/src/api/calculator-types-v1.ts index 866e4d1..5d3a232 100644 --- a/src/api/calculator-types-v1.ts +++ b/src/api/calculator-types-v1.ts @@ -53,6 +53,16 @@ export interface Incentive { } export interface APIResponse { + authorities: { + [authorityId: string]: { + name: string; + logo?: { + src: string; + width: number; + height: number; + }; + }; + }; savings: { tax_credit: number; pos_rebate: number; diff --git a/src/authority-logos.ts b/src/authority-logos.ts new file mode 100644 index 0000000..dd92763 --- /dev/null +++ b/src/authority-logos.ts @@ -0,0 +1,69 @@ +import { css, html, nothing } from 'lit'; +import { APIResponse } from './api/calculator-types-v1'; + +export const authorityLogosStyles = css` + .authority-logos { + width: 100%; + max-width: 1280px; + + background-color: white; + } + + .authority-logos h2 { + text-align: center; + color: #111; + font-size: 2rem; + font-weight: 500; + line-height: 125%; + + margin: 48px 24px 64px 24px; + } + + /* Tighter margins for the header on small screens */ + @media only screen and (max-width: 640px) { + .authority-logos h2 { + font-size: 1.5rem; + margin-top: 32px; + margin-bottom: 48px; + } + } + + .authority-logos__container { + display: flex; + + flex-wrap: wrap; + justify-content: center; + align-items: flex-start; + gap: 64px; + + margin-bottom: 80px; + } +`; + +/** + * Displays the white area at the bottom of the calculator results with logos + * of the authorities whose incentives are displayed. + */ +export const authorityLogosTemplate = (response: APIResponse) => { + if (Object.keys(response.authorities).length === 0) { + return nothing; + } + + const logos = Object.values(response.authorities) + .filter(auth => !!auth.logo) + .map( + auth => + html``, + ); + + return html` +
+ `; +}; diff --git a/src/state-calculator.ts b/src/state-calculator.ts index df23cc7..f7609f5 100644 --- a/src/state-calculator.ts +++ b/src/state-calculator.ts @@ -21,6 +21,7 @@ import { iconTabBarStyles } from './icon-tab-bar'; import '@shoelace-style/shoelace/dist/components/spinner/spinner'; import { STATES } from './states'; +import { authorityLogosStyles } from './authority-logos'; const loadingTemplate = () => html`