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` +
+

Incentive data brought to you by

+
${logos}
+
+ `; +}; 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`
@@ -50,6 +51,7 @@ export class RewiringAmericaStateCalculator extends LitElement { utilitySelectorStyles, separatorStyles, iconTabBarStyles, + authorityLogosStyles, ]; /* supported properties to control showing/hiding of each card in the widget */ diff --git a/src/state-incentive-details.ts b/src/state-incentive-details.ts index e277eea..87917de 100644 --- a/src/state-incentive-details.ts +++ b/src/state-incentive-details.ts @@ -3,6 +3,7 @@ import { APIResponse, Incentive, ItemType } from './api/calculator-types-v1'; import { exclamationPoint, questionIcon, upRightArrow } from './icons'; import { PROJECTS, Project, shortLabel } from './projects'; import { iconTabBarTemplate } from './icon-tab-bar'; +import { authorityLogosTemplate } from './authority-logos'; export const stateIncentivesStyles = css` .loading { @@ -430,5 +431,6 @@ export const stateIncentivesTemplate = ( // If a nonexistent tab is selected, pretend the first one is selected. otherTabs.includes(selectedOtherTab) ? selectedOtherTab : otherTabs[0], onTabSelected, - )}`; + )} + ${authorityLogosTemplate(response)}`; };