Add authority logos at bottom of results

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;

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`<img
+          src="${auth.logo!.src}"
+          width="${auth.logo!.width}"
+          height="${auth.logo!.height}"
+        />`,
+    );
+
+  return html`
+    <div class="authority-logos">
+      <h2>Incentive data brought to you by</h2>
+      <div class="authority-logos__container">${logos}</div>
+    </div>
+  `;
+};

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`
   <div class="card card-content">
@@ -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 */

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)}`;
 };